自定义类名语义 ui 反应答案

【问题标题】：custom className semantic ui react自定义类名语义 ui 反应
【发布时间】：2018-12-07 18:56:00
【问题描述】：

我希望做这样的事情：

<Divider className="homepage-divider" />

但是无论我是否添加一个类名，这都是显示的：

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

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

【问题讨论】：

Looking at the source，你应该可以给一个自定义的className。你能展示更多你的代码吗？

标签： css reactjs semantic-ui classname semantic-ui-react

【解决方案1】：

正如 Tholle 所说，它应该可以工作。见工作示例： https://codesandbox.io/s/2p398kyykr

【讨论】：

【解决方案2】：

这很奇怪，当我删除文件中的所有内容并尝试类似于您的代码和框的东西时，它可以工作。我会玩弄我的代码并在我弄清楚问题所在后发布

【讨论】：

【解决方案3】：

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

后来想通了，semantic-ui 的 ui, divider 等默认类都有自己的 margin 添加。

解决方案：

为被 sematic-ui css 类覆盖的 css 属性添加 !important 。

例如：divider.jsx

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

styles.css

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

【讨论】：