我希望做这样的事情：
<Divider className="homepage-divider" />
但无论我是否添加一个类名，这都是显示出来的：
<div class="ui divider"></div>
我如何制作我自己的 className。我想多次使用不同宽度的分隔线。我已经知道如何使用覆盖文件对其进行自定义，但这会将我的常规分隔符设置为设定的宽度。
自定义 className 语义 ui react
IT技术
css
reactjs
semantic-ui
classname
semantic-ui-react
2021-05-06 22:07:55
3个回答
我在使用 className . 当我查看源代码时 margin ，该类正在被应用，但未应用添加该类的类。
后来，我想像 ui, divider semantic-ui这样的默认类都有自己的 margin 添加。
解决方案：
添加 !important 被 sematic-ui css 类覆盖的 css 属性。
例如：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;
样式.css
.custom-margin-class {
margin: 8px !important;
}
正如 Tholle 所说，它应该可以工作。参见工作示例：https : //codesandbox.io/s/2p398kyykr
这很奇怪，当我删除文件中的所有内容并尝试类似于您的代码和框的东西时，它就可以工作了。我会玩弄我的代码并在我弄清楚问题后发布