如何从 React 的库中更改组件的类名？答案

【问题标题】：How to changeClass name of component from library in React?如何从 React 的库中更改组件的类名？
【发布时间】：2019-10-01 13:45:42
【问题描述】：

我需要从库 pure-react-carousel 中更改一种组件样式）。在文档中说它可以通过组件的一些类名样式来完成，如下所示。我知道我必须更改这个类“carousel__dot--selected”我的问题是下一个 - 我必须在我的组件文件或某些 ccs 文件中定义这个类名？

<Dot children={null} className={servicesS['services-slider-dot']} slide={1}/>
<Dot children={null} className={servicesS['services-slider-dot']} slide={2}/>

enter image description here

【问题讨论】：

我不确定我是否理解了这个问题。你想覆盖图书馆的风格吗？例如，如果 lib 将 Text 设置为 color: black，您想将其更改为 color: red 吗？
是的，我需要覆盖库的样式，但不是使用样式属性，而是使用类名。实际上，据我所知，我是否需要更改“carousel__dot--selected”？
我刚刚回答了。如果可行，您能否将我的答案设置为未来观众的正确答案？

标签： css reactjs classname pure-react-carousel

【解决方案1】：

我是 pure-react-carousel 的作者。我认为您遇到了问题，因为您不确定 React 如何将类添加到组件中。

默认情况下，pure-react-carousel 的样式很少。但是每个组件都允许您添加自己的样式。事实上，这就是 pure-react-carousel 的意义所在。我们不会规定您的轮播应该是什么样子。

就像您必须将样式应用于 table、th、tr、td 标签以使表格看起来像您想要的那样，您必须将自己的样式应用于我们的 Dot 组件。

你在正确的轨道上。在您的情况下，您只需要在项目的全局 css 中为 .carousel__dot--selected 创建一个 css 规则。

您是否使用 create-react-app 设置了您的项目？

创建一个名为“global.css”的文件（不是 global.module.scss，它必须是一个 css 文件）在此处添加您的规则并将其导入到您应用的主文件中。

// global.css

.carousel__dot--selected {
  background-color: yellow;
}

【讨论】：