Overriding Styles in Semantic UI React

Overriding styles in semantic ui react

Specificity is king. Only time would need to use !important would be when inline style is present and the library does not expose a way to toggle the property off in some way (poor architecture choice).

The following list of selector types increases by specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g.,
#example).

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Take a look at the first UI Button for Semantic UI here, is comprised of the following HTML:

<button class="ui button">Click Here</button>

CSS is attached via semantic.min.css:

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

To override say, the font color, all we have to do is write a selector that is more specific than this selector. We can achieve this by combining their two class selectors (equally specific) with a type selector (additional specificity).

This would look like:

button.ui.button {
  color: red;
}

Now since button.ui.button is more specific in describing the location of the element in the page (DOM), than say just .ui.button, this signals to the browser that this style should override the previous declaration. This is a common way to customize a theme.

Great docs here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS

.ui.button {    cursor: pointer;    display: inline-block;    min-height: 1em;    outline: 0;    border: none;    vertical-align: baseline;    background: #e0e1e2 none;    color: rgba(0,0,0,.6);    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;    margin: 0 .25em 0 0;    padding: .78571429em 1.5em .78571429em;    text-transform: none;    text-shadow: none;    font-weight: 700;    line-height: 1em;    font-style: normal;    text-align: center;    text-decoration: none;    border-radius: .28571429rem;    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;    will-change: '';    -webkit-tap-highlight-color: transparent;}
button.ui.button {  color: red;}

<button class="ui button">Click Here</button>

CSS overriding Semantic React Ui Properties

You can simply give the className prop to the Header

See working demo here

Also you need to apply !important to the styles.

Note: If you inspect element, you will see that the below styles are applied to Header by semantic ui library. So if you want to provide custom className then with below mentioned css properties then you have to use !important.

.ui.header {
    border: none;
    margin: calc(2rem - .14285714em) 0 1rem;
    padding: 0 0;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-weight: 700;
    line-height: 1.28571429em;
    text-transform: none;
    color: rgba(0,0,0,.87);
}

Override css without using !important - Semantics UI React

Figured it out, I was using Semantics styling variables, and not using the default css styling variables. I also did not want to use !important after referring to this post: Is it bad to use !important in css property

const MembersTable = styled(Table)`
&&&{
    border-spacing: 0 1em;
}

Why cant I override Semantic UI CSS?

Use more specific rules to override other styles.

Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When multiple declarations have equal specificity, the last
declaration found in the CSS is applied to the element. Specificity
only applies when the same element is targeted by multiple
declarations. As per CSS rules, directly targeted elements will always
take precedence over rules which an element inherits from its
ancestor.

Read more about Specificity.

.ui.grid > .row > .column.text {    display: flex;    justify-content: center;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="ui grid">    <div class="three column row">        <div class="four wide column" ></div>        <div class="text eight wide column"> <h1>Team Selection</h1></div>        <div class="four wide column"></div>        </div>    <div class="three column row">        <div class="four wide column"></div>        <div class="eight wide column"> </div>        <div class="four wide column"></div>    </div></div>

Why custom css class does not work on React-Semantic-UI elements?

Give your className a bit more specific name, like claim_Card. After that in your css you need to override sematic's default css by adding your className to existing semantic's css for that component. In your case it would be something like

.ui.card.claim_Card {
  background: #455332; //for example
}

This will give your css rule more specificity and will override default semantic css. Anyway, check in your browser inspector what css class is applied to your element that you want to style and use that className (in this case .ui.card) and add on it your className definition and rules.

Semantic Ui Variables and Overrides

The selector was

.ui.secondary.pointing.menu .active.item {
    border-color: red;
}

---

Related Topics