пользовательский className семантический интерфейс реагировать

Question

Я надеялся сделать что-то вроде этого:

<Divider className="homepage-divider" />

Но независимо от того, добавляю ли я имя класса, это все, что появляется:

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

Как мне создать собственное имя класса. Я хотел бы использовать делитель несколько раз с различной шириной. Я уже знаю, как настроить его с помощью файлов переопределения, но это установило бы мой обычный делитель на заданную ширину.

Answer 1

Это очень странно, когда я вычеркиваю все в файле и пробую что-то похожее на ваши коды, и все работает. Я поиграюсь с моим кодом и опубликую, в чем проблема, когда выясню

Answer 2

У меня была похожая проблема использования className . Класс применялся, когда я просматривал исходный код, но margin , для которого был добавлен класс, не применялся.

Позже я понял, что классы по умолчанию, такие как ui, divider для semantic-ui, имеют свои собственные margin добавленные.

Решение:

Добавьте !important для свойства css, которое перезаписывается классами sematic-ui css.

Например: Деление.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;
}

Answer 3

как упоминал Толле, это должно работать. см рабочий пример: https://codesandbox.io/s/2p398kyykr