I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
In this component, I want to create two different versions: contained and outlined. Here's an example of my outlined button.
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the outlined variant is selected, the button receives the class Muibutton-outlined. I'd like to customize this class specifically to change the border (only for the outlined variant). I've attempted something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
Unfortunately, it hasn't been successful so far.