Question

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

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

enter image description here

Answer 1

在您的示例中，您正在使用 react-carousel 库，但是当我个人需要覆盖我使用的库样式（SemanticUiReact）时，我个人在.css文件中创建类然后添加带有!important标签的样式来覆盖其余样式。例如：

该库将每个组件设置为黑色，但我希望将其设置为红色。

我创建我的CSS文件：

styles.css

.myHeader {
  color: red !important;
}

我导入CSS的方式与导入库的方式相同

import { Header } from 'semantic-ui-react';
import './styles.css';

我将自己的样式传递给他们的className属性：

<Header className="myHeader">Hello World!</Header>

Answer 2

我是纯色轮播的作者。我认为您遇到了问题，因为您不确定React如何将类添加到组件。

默认情况下，纯反应式轮播的样式很少。但是每个组件都允许您添加自己的样式。实际上，这就是纯反应式转盘的关键所在。我们并没有决定您的轮播会是什么样子。

就像您必须将样式应用于表，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;
}

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

2 个答案: