哈Ha！ 我向您介绍了
“样式化React组件的四种方式”一文的翻译。
迄今为止，已经开发了许多样式化React组件的方法。 从库到使用传统CSS文件。 选择范围很广，很可能会根据您的喜好进行选择。 这是四种样式化React组件的方法。
内联CSS
由于JSX转换为HTML元素，因此可以使用style属性。 只需将带有属性的对象传递给元素，即可将样式应用于元素。 它看起来像这样：
但是，这种方法非常有限。 它不能使用伪选择器，例如：悬停以及媒体查询。 但这并不意味着不应使用它。 当只有2个或3个不需要伪选择器或媒体查询的属性时，和/或需要在样式中使用条件的情况下，可以使用它。
样式库
我喜欢学习新的库或框架。 该方法是我最喜欢的React样式样式。 有很多样式库，它们不仅可以样式化组件，还可以提供附加的“超级功能”（如我所说），以及使事情变得更加轻松的所有CSS功能。
一个用法示例可能如下所示：
上面是使用样式化组件库的示例。
包装器称为样式化组件。 样式是在Wrapper常量中定义的，该常量仅使用这些样式创建一个组件。 只需确定所需的元素类型即可，例如：div，标头或img，并像使用React组件一样使用它。 不使用HTML元素，而仅使用组件，这使得代码更简洁，更易于阅读。
这只是我的偏爱。 也许您喜欢使用div或查看本机HTML元素。 没问题！ Khan Academy开发了Aphrodite库，该库使用HTML元素，但使用className属性将样式附加到组件。
我在阿芙罗狄蒂上的文章这些库还具有许多其他功能，可让您执行出色的工作。 有许多库，因此您只需要尝试看看哪个库将与您同在。
以下是目前最受欢迎的两个：
https://www.styled-components.com/https://glamorous.rocks/外部风格
您可以在外部CSS文件中编写样式，并在需要时将其导入到组件中。 这可能是您开始学习React时所学的第一种方法。 但是，添加其他元素时，命名存在问题。 所有样式都在全球范围内。 例如，您有两个由您或您的队友创建的具有相同名称的项目，在这种情况下，您可能会遇到此问题。
CSS模块
CSS模块与在外部文件中编写CSS非常相似。 唯一的区别是样式是封装的，这与外部CSS文件的传统用法相反。 这意味着样式将不会相互冲突或覆盖。 您使用与传统CSS中相同的方法。 它还允许使用所有好的方法，例如BEM。 您可以在这里阅读更多内容：
https://github.com/css-modules/css-modules因此，您不必决定使用：传统CSS，CSS模块，Inline CSS，用于样式的库或这些方法的组合，我认为，所有这些都取决于您的喜好和团队的喜好。
感谢您的阅读。 发现错误？ 随时告诉我关于她的事。 祝你有美好的一天！