Блог

Я новичок в пользовательском интерфейсе Material и испытываю трудности. У меня есть компонент кнопки

 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' amp;amp; classes.hoverContained)}
    >
      {props.children}
    </Button>
  );
}
 

Из этого компонента я хотел бы иметь два варианта: содержащийся и изложенный. Вот моя выделенная кнопка.

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

При выборе выделенного варианта кнопка имеет класс Muibutton-выделенный. Я хотел бы переопределить этот класс, чтобы изменить границу (только в описанном варианте, поэтому только для этого класса).
До сих пор я пробовал что-то вроде:

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

Это не работает.

У меня есть аналогичная настройка, и я попытался:

• добавление класса submit в мой компонент кнопки

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

• поскольку у меня есть submit класс, я могу быть более точным в своем стиле, например:

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

Вот результат:

Материал -кнопка пользовательского интерфейса с изображением розовой границы

Пока я использовал Ant design ui kit, и я переопределил стили в его стиле по умолчанию следующим образом:

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

Это было сделано в react, и класс custom_css переопределяет его стили по умолчанию

Это может вам помочь, если нет, пожалуйста, дайте мне знать