'CSS Material UI Change compontn outlined color

I have a problem with Material UI -> <Button variant="outlined">Sign Up</Button> + create theme

My code:

import { createTheme } from '@mui/material/styles'

const styles = {
  white: '#ffffff',
  black: '#000000'
}

const theme = createTheme({
  typography: {
    button: {
      textTransform: 'none',
    },
  },
  palette: {
    primary: {
      main: styles.black,
      contrastText: styles.white
    },
  },
})

export default theme

And it is used in the Index.js

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Problem only appeard for <Button variant="outlined"> For normal Button it will work, I don't know why this problem appear only for this variant. I just wanna change the color of the text, animation, and background.

2nd problem: How could I change the width of the border in the same button without losing the colors of animations?

cssreactjsmaterial-uistylesthemes


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions