5

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.

Stephen Phillips
  • 641
  • 10
  • 26
  • [Looking at the source](https://github.com/Semantic-Org/Semantic-UI-React/blob/50b324165fd2908d0b4aab66d3b02e3a61886a9e/src/elements/Divider/Divider.js#L18), you should be able to give a custom `className`. Could you show more of your code? – Tholle Jun 28 '18 at 16:07

3 Answers3

2

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;
}
pritam
  • 2,452
  • 1
  • 21
  • 31
0

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

classic.matsuo
  • 109
  • 1
  • 7
0

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

Stephen Phillips
  • 641
  • 10
  • 26