custom className semantic ui react

Question

I was hoping to do something like this:

<Divider className="homepage-divider" />

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

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

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.

Answer 1

as Tholle mentioned, it should work. see working example: https://codesandbox.io/s/2p398kyykr

Answer 2

That's very odd, when i strip out everything in the file and try something similar to your codesandbox it works. I will play around with my code and post what the issue is once I figure it out

Answer 3

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.

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

Solution:

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

e.g: 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;
}