title: CSS Material UI Change compontn outlined color
body: <p>I have a problem with Material UI -&gt; <code>&lt;Button variant=&quot;outlined&quot;&gt;Sign Up&lt;/Button&gt;</code> +  <code>create theme</code></p>
  <p>My code:</p>
  <pre><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
  
  </code></pre>
  <p>And it is used in the Index.js</p>
  <pre><code>&lt;ThemeProvider theme={theme}&gt;
    &lt;App /&gt;
  &lt;/ThemeProvider&gt;
  </code></pre>
  <p>Problem only appeard for <code>&lt;Button variant=&quot;outlined&quot;&gt;</code>
  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.</p>
  <p>2nd problem: How could I change the width of the border in the same button without losing the colors of animations?</p>