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.
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;
}
as Tholle mentioned, it should work. see working example: https://codesandbox.io/s/2p398kyykr
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
className. Could you show more of your code?