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

user1250264 · Accepted Answer · 2019-12-19 13:19:26Z

1

This fixed the issue

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

answered Dec 19, 2019 at 13:19

user1250264

9251 gold badge24 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tcanusso Over a year ago

This isn't a good solution. I don't precisely know the problem, but you definitely shouldn't be using !important to make styles work. Read up on the documentation of the bs framework you're using, try different css classes combinations, inline styles, etc. If you solve all your css problems with !important, you're going to have issues between styles in the long run.

Sunil Chaudhary · Accepted Answer · 2019-12-18 20:59:25Z

0

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

answered Dec 18, 2019 at 20:59

Sunil Chaudhary

4,7733 gold badges26 silver badges43 bronze badges

Comments

tcanusso · Accepted Answer · 2019-12-18 21:28:19Z

0

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.

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

answered Dec 18, 2019 at 21:28

tcanusso

1927 bronze badges

Collectives™ on Stack Overflow

react js button color css styling not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related