Material UI Button - How can I use "::first-letter" pseudo element selector with MuiButton class?

user_2830164 0
Viewed 329

I am trying to have sentence case with Button text inside Material UI Button.

https://mui.com/components/buttons/

text inside the button - ADD FRIEND should become to sentence case as Add friend.

I have tried to override the theme. But it does not target the element this way. Please suggest if this is possible to do.

createTheme({
 components: {
  MuiButton: {
    styleOverrides: {
      root: {
        '&::first-letter': {
          textTransform: 'uppercase',
        },
      },
    }
  }
}
});
material-ui reactjs css javascript
1 Answers

They way I do it, is write the following code in makeStyles of the page/component:

  parentOfButton: {
    '& .MuiButton-root': {
      textTransform: 'none',
    },
  },

<Box className={classes.parentOfButton}>
  <Button>Text</Button>
</Box>

UPDATE

I have tried doing the same thing in createTheme, and it worked, here is the way I did it:

  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },
user_164751080
Related