自定义className语义化UI React

Question

我希望能做类似于这样的事情：

我想要实现以下操作：

<Divider className="homepage-divider" />

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

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

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

- Stephen Phillips

---

通过查看源代码（https://github.com/Semantic-Org/Semantic-UI-React/blob/50b324165fd2908d0b4aab66d3b02e3a61886a9e/src/elements/Divider/Divider.js#L18），您应该能够提供自定义的“className”。您能展示更多的代码吗？ - Tholle

Answer 1

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

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

解决方案：

为被语义化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;
}

- pritam

Answer 2

正如Tholle所提到的，它应该可以工作。 请参考以下工作示例： https://codesandbox.io/s/2p398kyykr

- classic.matsuo

Answer 3

非常奇怪，当我剥离文件中的所有内容并尝试类似于您的codesandbox时，它可以工作。我会调整我的代码，并在找到问题后发布它。

- Stephen Phillips