React 与 Vue 开发差异——CSS 样式react 中似乎与vue 不同，vue中在使用 scoped 后需要通

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

存在全局污染的情况：

情况 1：使用 `createGlobalStyle`

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）

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

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

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

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

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

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

错误示例 ❌：

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

正确做法 ✅：

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

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

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

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

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

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

或者使用 BEM 风格：

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

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

tip 🍇

组件级 styled 命名规范总览（主流方案）

类型	命名规则	示例	说明
纯样式组件（不依赖逻辑）	✅ `StyledXxx`	`StyledHeader`, `StyledLogo`, `StyledButton`	最通用、主流写法
包裹三方组件（如 Antd）	✅ `XxxStyled`/ `StyledAntXxx`	`LayoutStyled`, `StyledAntSider`	表示“样式化的 Antd 组件”
特定页面私有样式块	✅ `PageNameWrapper`	`DashboardWrapper`, `LoginWrapper`	表示页面容器级样式
带逻辑的业务组件	✅ 普通 PascalCase 命名	`HeaderNav`, `SidebarMenu`	不加 `Styled`前缀，表示有交互或逻辑

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