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

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

<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


reactjs typescript javascript css styled-components
person a125    schedule 19.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

При использовании material-ui следует учитывать несколько моментов.

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

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

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

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

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;
    }
  }
`;

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

person Anurag Srivastava    schedule 19.04.2020
comment
Не думаю, что это единственная проблема. Вы видели добавленную мной песочницу? Странно, но цвет на моем локальном хосте отличается от цвета в песочнице, хотя я буквально скопировал одну и ту же часть. Тем не менее, ширина отличается от того, что я хочу (например, ‹Button›) - person a125; 20.04.2020
comment
@ a125 Да, есть еще кое-что, на что стоит обратить внимание, взгляните на мой обновленный ответ и ссылку на коды и ящик - person Anurag Srivastava; 20.04.2020