Make MUI Checkbox border color as gradient-CodePudding

I am writing styleOverrides to MuiCheckBox and want to make its borders as linear gradient. Any ideas how to make it possible?

MuiCheckbox: {
    styleOverrides: {
      root: {
        color: 'linear-gradient(89.38deg, #957947 -13.88%, #E1BC6C 27.59%, #EFDB7C 66.54%, #E9BA6A 105.86%)',
        backgroundColor: 'transparent',
   }
}

CodePudding user response：

You can add borderColor property to your root like this,

root:{
   borderColor: 'linear-gradient()'
}

CodePudding user response：

Something I use and I am converting our whole app to in order to do the migration from MUI 4 to 5, is component overrides.

So say you have a or component. Basically in like a styled.js file, you can do:

import { withStyles } from '@material-ui/core';
import { MenuItem } from '@material-ui/core';

const MenuItemStyled = withStyles((theme) => ({
   root: {
      borderColor: 'yourGradient'
   }
})(MenuItem);


export { MenuItemStyled }

(in jsx file like 'index.js')

import MenuItemStyled from './styled';
   import Menu from '@material-ui/core';

   <Menu>
     <MenuItemStyled value={blah}>blah</MenuItemStyled>
     <MenuItemStyled value={blahblah}>blahblah</MenuItemStyled>
   </Menu>

I find this gives you more root access to component styles without having to dig through specific classnames in the inspector. When overriding components like this is checks for your custom styles first before render and it just makes everything significantly easier. Plus in MUI 5 useStyles is depricated, so you'll want to do it this way regardless in order to keep your app current.