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)

Create New Menu

        

Answer 1

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

Example:

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

Answer 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 {
  ....
}

Answer 3

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)

Answer 4

Put .ui.button infront of your class name create-new-btn. It should look like below

.ui.button.create-new-btn {
  //Your css code
}

Then in your html/jsx template you can use the class name create-new-btn like below:

<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>

Answer 5

#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;

}

It will target all button with ui class.

Hope It will be useful :)