кнопка пользовательского интерфейса со стилевыми компонентами

Question

Я использовал эту кнопку пользовательского интерфейса материала, и у нее был фиолетовый фон

<Button
      component={Link}
      to={link}
      style={{
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
        width: 200,
      }}>

Я попытался изменить ее на стиль-компонент:

export const StyledButton = styled(Button)`
  background: #6c74cc;
  border-radius: 3;
  border: 0;
  color: white;
  height: 48;
  padding: 0 30px;
  width: 200px;
`;

Но это выглядит совсем по-другому. Фон белый, а текст черный. Хотя я применяю тот же стиль. Ширина также отличается. Как я могу это исправить?

https://codesandbox.io/s/condescending-frost-muv1s?file= / src / App. js

Answer 1

При использовании material-ui

1. * 1005 необходимо учитывать несколько моментов. Вам нужно разделить свойства стиля точкой с запятой ; Source

2. Даже в этом случае большинство стилей переопределяются встроенными классами material-ui, поскольку эти классы имеют более высокую специфичность. Чтобы преодолеть это, используйте оператор &&, чтобы применить стили на одном уровне специфичности.

3. Наконец, background также необходимо установить на :hover, чтобы переопределить material-ui style

С этими изменениями ваш стилизованный компонент будет выглядеть следующим образом:

export const StyledButton = styled(Button)`
  && {
    background: #6c74cc;
    border-radius: 3px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    width: 200px;
    margin-right: 20px;
    &:hover {
      background: #6c74cc;
    }
  }
`;

И вы можете видеть, как он работает в this CodeSandbox