How do I correctly apply custom css to material ui button?

0
votes

I'm having trouble trying to custom style a selection of material UI buttons, while trying to align the left side text part of the button to the left, whilst keeping the right side text centered.

I'm using css modules and makeStyles.

justifyContent: "center" worked for the right side divs (classes.activityButton).

justifyContent: "flex-start" is not working for the left side (classes.leftSide).

also you can see that the "SEDENTARY" part of a button is aligned differently to "LIGHTLY ACTIVE" even though they have the same commands?

myapp example

1
htmlcssuser-interfacematerial-ui

1 Answers

0
votes

The issue is with your html structure, justify-content only aligns the children of the element horizontally on the element you apply it to. It will not align the element itself.

You need to either:

  • Use floats
  • Use grid

Also see this guide to flex, it is very helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/