自定义 className 语义 ui 反应

我希望做这样的事情：

<Divider className="homepage-divider" />

但无论我是否添加类名，都会显示以下内容：

<div class="ui divider"></div>

如何创建自己的 className.我想多次使用不同宽度的分隔线。我已经知道如何使用覆盖文件自定义它，但这会将我的常规分隔线设置为设定的宽度。

我在使用时遇到了类似的问题 className 。当我查看源代码时，该类正在被应用，但是 margin 未应用添加的类。

后来我发现默认的类如 ui, divider Semantic-ui 有自己的 margin added.

解决方案：

Add !important 对于被语义 UI CSS 类覆盖的 css 属性。

e.g: 分隔符.jsx

import React from 'react';
import { Divider } from 'semantic-ui-react';
import './styles.css';
const CustomDivider = () => <Divider className='custom-margin-class'/>;
export default CustomDivider;

样式.css

.custom-margin-class {
    margin: 8px !important;
}