css - React Component SCSS 适用于所有组件

Question

我刚开始学习 ReactJS，我用 .scss 做了一个元素

出于某种原因，当我在 .scss 文件中添加样式时，该样式也会更改其他组件的样式。

例子:我在 Home.scss 中添加了 li 样式，但是它会改变 Footer 组件的 li 样式也。我没有将它导入 Footer.js 或其他任何东西。

有谁知道它这样做的原因是什么，解决方案是什么？

Answer 1

为每个组件添加一个 className 不会解决您的问题，它会按预期工作，直到您有任何嵌套组件。

因为如果你添加

#component-name {
  li {
    ...
  }
}

CSS 也将应用于该组件内部的任何组件。

要将你的 CSS 限制在 React 中的一个组件，你有几个选择:

CSS 模块

Create React App 支持开箱即用的 CSS 模块(从版本 2 开始)
它也适用于 SCSS (YourComponent.module.scss)

YourComponent.js:

import styles from './YourComponent.module.css'

export const YourComponent () => {
  <ul>
    <li className={styles.yourLi}>
  </ul>
}

你的组件.module.scss:

.yourLi {
  color: blue;
}

JS 中的 CSS

使用此方法，顾名思义，您可以在 JS 中声明 CSS。有多个库可以实现这一点。

Styled-Components

这里是一个带有样式化组件的例子，它似乎是今天最常用的:

const YourLi = styled.li`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`  

render(
  <div>
    <ul>
      <YourLi>
        Your styled li
      </YourLi>
    </ul>
  </div>
)