react js button color css styling not working

Question

I am writing a custom css styling in mypagestyle.styl with the following

:local .mybutton
  border-radius: 1px
  padding: 2px 2px 2px 2px 
  margin: 2px 2px 2px 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

every styling except the color and background-color is taking effect.

Just the color and background-color is not working.

in the jsx code I have the following

<Button className={mypagestyle.mybutton}>{"Test"}</Button>

When I right clicked with the mouse to inspect the element, I see the following

.btn.btn-default and I can play around with the color in the Styles tab. This is the bootstrap styling but I did not specify the bootstrap style at all ie "btn btn-primary" etc..

What am I (newbie) doing wrong?

Thanks

Answer 1

• Margin and padding can contain at maximum 4 values ( top right bottom left ). Here 5 values are present
• font-sizeL is not any propertly. It is font-size .
• border-radius might be getting applied, but value is very small and so you might not be seeing the result. Try using any value such as 5px or 10px to see if it is still not applied

The css is modified to the following:

  border-radius: 1px
  padding: 2px
  margin: 2px 
  font-size: 14px
  text-align: center
  background-color: #4582ec
  color: #fff

Note: for margin and padding, only 1 value is used since all are common

Answer 2

If you can't see your class '.mybutton' when inspecting the component, it means you are not passing it correctly. You should check out react BS docs (I'm linking react bootstrap's button because I assumed you're using that module, but I don't know how you are using BS) https://react-bootstrap.github.io/components/buttons/#api on how to pass custom classes, or you can use the attribute 'styles' to set them inline.

Try both to see differences, but it's recommended to use css classes, inline styles can get messy very quickly.

Ps if what you posted is a CSS file, you should wrap with curly braces and add semi colons

Answer 3

This fixed the issue

background-color: #4582ec !important color: #fff !important