reactjs - react 样式最佳实践。全局或组件级别

Question

我正在研究 React 。通常我所做的是将我所有的样式设置在一个单独的文件中，也就是 global 。我读到还有其他一些方法，例如 JS 中的组件级样式或 css，但无法得出我应该使用哪一种的结论？

只是想知道哪种方式适合什么需求..

Answer 1

可以选择使用类似 styled-componenents 的东西, emotion或其他 CSS-in-JS 框架。我认为这些是一个好的开始。这在 styled-components 中看起来像这样。

const StyledDiv = styled.div`
  border: 1px solid red;
`

// react code
return <StyledDiv>Content</StyledDiv>

它非常简单，所以我认为从这里开始是一个不错的选择。我个人的选择是使用 CSS-Modules(带有 Scss)。 Create-React-App 确实支持它。你所做的就是编写普通的 CSS 或 SCSS 并导入它。 Webpack 将从这些 CSS 文件中生成作用域类名。看起来像这样。

// styles.module.scss
.StyledDiv {
  border: 1px solid red;
}

// component.js
import styles from './styled.module.scss'

return <div className={styles.StyledDiv}> content </div>

这允许您仍然使用 Sass 中的部分和混合，同时仍然像在样式化组件中那样限定您的类名。这些将是我推荐的选项。

回答你的问题。我不建议使用全局样式，这可能会导致样式和覆盖不同样式的多个问题。组件范围更好。