带有样式组件的材质 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

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中工作