带有样式组件的材质 ui 按钮

Question

我正在使用这个材质 ui 按钮，它有一个紫色的背景

<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您需要用分号分隔样式属性;即使这样，大多数样式都被内置material-ui类覆盖，因为这些类具有更高的特异性。为了克服这个问题，请使用&&运算符在相同的特异性级别上应用样式。最后，background还需要设置:hover为覆盖material-ui样式通过这些更改，您的样式组件将如下所示：export const StyledButton = styled(Button)`&nbsp; && {&nbsp; &nbsp; background: #6c74cc;&nbsp; &nbsp; border-radius: 3px;&nbsp; &nbsp; border: 0;&nbsp; &nbsp; color: white;&nbsp; &nbsp; height: 48px;&nbsp; &nbsp; padding: 0 30px;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; margin-right: 20px;&nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; background: #6c74cc;&nbsp; &nbsp; }&nbsp; }`;你可以看到它在这个 CodeSandbox中工作