custom className semantic ui react

Question

I was hoping to do something like this:

But no matter if I add a class name this is all that s

Answer 1

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 = () => ;
export default CustomDivider;

styles.css

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