How to change the background color in semantic ui react?

user_10368702 0
Viewed 17008

I just started developing with react semantic ui, I used the Homepage layout available on react.semantic-ui.com but I want to change the dark grey color on the top portion and footer but I am unable to find anything in semantic ui css

enter image description here

enter image description here

semantic-ui-react reactjs
1 Answers

It appears to be coming from the file semantic-ui-css/semantic.min.css, a minified copy of semantic.css:

.ui.inverted.segment,
.ui.primary.inverted.segment {
    background: #1B1C1D;
    color: rgba(255, 255, 255, 0.9);
}

which is build from segment.less:

.ui.inverted.segment,
.ui.primary.inverted.segment {
    background: @invertedBackground;
    color: @invertedTextColor;
}

As to how that files being included in your project - there appear to be a few ways:

Installing Semantic UI React provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components.

from their Usage guide. Just search for something like semantic.min.css in your repo.

user_58120470
Related