search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.07k stars 4.96k forks source link

!important in main css styles should override semantic.min.css styles but not working as expected #7067

Open shwethashyam1 opened 2 years ago

shwethashyam1 commented 2 years ago

Steps

I am unable to override the body in semantic UI. It seems to have broken/overriden my entire css stylesheet. I tried adding !important in my main css but it still does not work.

I added the following to style.css:

.body {
  font-family: 'DMSans', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  min-height: 100vh !important;
  scroll-behavior: smooth !important;
  text-rendering: optimizeSpeed !important;
  line-height: 1.5 !important;
  background: #FBFAF9 !important;
  color: #595454 !important;
}

Expected Result

Background color to be of #FBFAF9

Actual Result

Background color is #FFFFFF

Version

"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.4",