Question

我希望做这样的事情：

<Divider className="homepage-divider" />

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

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

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

Answer 1

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

Answer 2

这很奇怪，当我剥离文件中的所有内容并尝试类似于您的codeandbox时，它会起作用。一旦弄清楚了，我将试用我的代码并发布问题所在

Answer 3

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

后来，我发现语义UI的默认类（例如 ui, divider ）添加了自己的 margin 。

解决方案：

为css属性添加 !important ，该属性将被sematic-ui 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;

styles.css

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

自定义className语义ui反应

3 个答案: