Material-UI styling the button variant outlined

Question

I'm new to Material UI and I'm struggling. I have 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>
  );
}

From this component, I'd like to have two variants: contained and outlined. Here is my outlined button.

<TheButton
      variant="outlined"
      color="secondary"
    >
      secondary
</TheButton>

When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class). So far I've tried something like:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    '.MuiButton-outlinedSecondary':{ 
      border:"2px solid red" ,
    },
  }
)

It doesn't work.

Answer 1

I have a similar setting, and I tried:

• adding a class submit to my button component

<Button
 type="submit"
 variant="outlined"
 disabled={isSaving || invalid || unchanged}
 color="secondary"
 className={classes.submit}
>
  SAVE CHANGES
</Button>

• since I have the submit class I can be more precise in my styling like so:

const useStyles = makeStyles({
  submit: {
    marginTop: padding.medium,
    marginLeft: padding.small,
    '&.MuiButton-outlinedSecondary': {
      border: '1px solid pink',
    },
  },
});

Here is the result:

Material-ui button with pink border image

Answer 2

As long as I have used Ant design ui kit and I have overrided styles on its default style like this:

<Button type="primary" className={styles.custom_css}>click</Button>

This has done in react and custom_css class overrides its styles on default

This might can help you, if not please let me know