How to customize the Semantic UI buttons(background-color, border-radius and all)

Question

How to customize the Semantic UI buttons(background-color, border-radius and all)

<button class="ui button create-new-menu-btn">Create New Menu</button>

. create-new-menu-btn {
    border-radius: 0;
    background-color: red;
}

The above code is not working

Solution 1

You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.

Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

For your particular problem:

One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:

Method 1

#bodyid .create-new-menu-btn {
    //Properties
}

Another way is to simply add an id to the element you want to select

Method 2

#create-new-menu-btn {
}

Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)

Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)

Solution 2

You can also add semantic ui's classes before your own for specificity. For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:

ui.button.create-new-menu-btn {
  ....
}

Solution 3

If using JSX, you can use inline styling for the targeted elements

Example:

<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>