React 与 Vue 开发差异——CSS 样式

Carry3452025-10-28 13:34

react 中似乎与vue 不同，vue中在使用 scoped 后需要通过:deep()才能修改子组件的样式，但react 中看起来可以随意修改，不会造成样式污染吗？如何解决？

存在全局污染的情况：

情况 1：使用 `createGlobalStyle`

jsx 复制代码

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    color: red;
  }

  .ant-btn {
    border-radius: 0; /* 影响所有 antd 按钮 */
  }
`

就是显式地往全局注入 CSS。

✅ 合理用于基础 reset / normalize.css。

❌ 但不能随便在业务组件里定义，否则污染全局。

情况 2：在 styled 里写了全局选择器（嵌套 CSS）

jsx 复制代码

const Wrapper = styled.div`
  .ant-btn {
    color: red;
  }
`

这看似"写在组件里"，但其实会生成类似：

css 复制代码

.sc-xxx .ant-btn { color: red }

当 .ant-btn 被渲染在这个组件内，就被强行覆盖了样式。

如何避免污染（最佳实践）

1️⃣ 禁止直接写全局类选择器

错误示例 ❌：

jsx 复制代码

const Box = styled.div`
  .ant-btn {
    color: red;
  }
`

正确做法 ✅：

jsx 复制代码

import { Button } from 'antd'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  color: red;
`

通过"组件包裹"而非"全局类名"方式修改样式，能彻底避免污染。

2️⃣ 使用命名空间前缀统一组件风格

给每个 styled 组件统一一个命名前缀：

jsx 复制代码

const AppButton = styled.button`
  &.app-btn {
    border-radius: 4px;
  }
`

或者使用 BEM 风格：

jsx 复制代码

const Wrapper = styled.div`
  &.app {
    &__header { ... }
    &__content { ... }
  }
`

这样生成的类名会被 styled-components 的哈希包裹，冲突概率几乎为零。

React 与 Vue 开发差异——CSS 样式

存在全局污染的情况：

情况 1：使用 createGlobalStyle

情况 2：在 styled 里写了全局选择器（嵌套 CSS）

如何避免污染（最佳实践）

1️⃣ 禁止直接写全局类选择器

2️⃣ 使用命名空间前缀统一组件风格

情况 1：使用 `createGlobalStyle`