Reactjs React造型最佳实践。全局或组件级别

我正在做react。通常我所做的是将所有样式设置在一个单独的文件中。我了解到还有其他一些方法，比如JS中的组件级样式或css，但我无法断定应该使用哪种方法

---

只想知道哪种方式适合什么需要。

在JS框架中可以使用类似、或其他CSS的选项。我认为这是一个好的开始。这在样式化组件中类似于此

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

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

constyleddiv=styled.div`
边框：1px纯红；
`
//反应码
返回内容

这很简单，所以我认为从这里开始是个不错的选择。 我个人的选择是使用CSS模块（与SCS一起使用）。CreateReact应用程序确实支持它。你所要做的就是编写普通的CSS或SCS并导入它。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>

//styles.module.scss
StyledDiv先生{
边框：1px纯红；
}
//component.js
从“./styled.module.scss”导入样式
返回内容

这允许您仍然使用来自Sass的partials和mixin，同时仍然像在样式化组件中一样确定类名的范围。这些将是我推荐的选择

---

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

这些问题是什么？例如，覆盖样式、对您不希望的元素产生影响、需要注意特殊性。举几个例子。只需阅读有关css和全局范围的内容；）