自定义className语义ui反应 [英] custom className semantic ui react

问题描述

我希望这样做：

<Divider className="homepage-divider" />

但是不管我是否添加一个类名，这一切都将显示出来：

But no matter if I add a class name this is all that shows up:

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

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

How do I make my own className. I would like to use the divider multiple times with different widths. I know how to customize it with the override files already but that would set my regular divider to a set width.

推荐答案

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

I had similar issue of using the className . The class was getting applied when I viewed the source but the margin for which the class was added wasn't applied.

后来，我发现默认类（例如 ui，semantic-ui的分隔符）添加了自己的边距 。

Later, I figured that the default classes such as ui, divider of semantic-ui have their own margin added.

解决方案：

添加！important 表示css属性，该属性已被sematic-ui css类覆盖。

Add !important for the css property which is getting overwritten by sematic-ui css classes.

例如： 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反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！