使用样式组件覆盖 material-ui 按钮样式

Question

我正在使用material-ui button并尝试通过样式组件覆盖边界半径（即，使其为 0）。 但是，它不起作用。

代码：

import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";

const StyledButton = styled(Button)`
  background-color: #d29d12;
  border-radius: 0;
`;

export default function App() {
  return <StyledButton>Hello</StyledButton>;
}

Answer 1

默认情况下，Material-UI 在<head>元素的末尾注入它的样式。 这意味着它的样式将出现在由 styled-components 生成的样式之后，因此当CSS 特异性相同时，Material-UI 样式将胜过 styled-components 样式。

您可以使用带有injectFirst属性的StylesProvider组件将 Material-UI 样式移动到<head>的开头，然后 styled-components 样式将在它之后并获胜。

import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { StylesProvider } from "@material-ui/core/styles";

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}

相关回答：

• Material-UI 中使用样式组件的媒体查询

Answer 2

使用 styled-components 更高的特异性语法： https : //styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

const StyledButton = styled(Button)`
  && {
    background-color: red;
    border-radius: 0;
  }
`;

Answer 3

通过将 className 添加到 StyledButton，它可以覆盖 MUI 按钮样式，

<StyledButton className={'myclassName'}>Hello</styledButton>

const StyledButton = styled(Button)`
 &.myclassName {
    background-color: red,
    border-radius: 0
  }
`;

Answer 4

 const StyledButton = styled(Button)({ '&&&': { backgroundColor: red, borderRadius: 0 } )}

Answer 5

您可以通过将 !important 应用于样式化组件来覆盖按钮的默认边框半径。

const StyledButton = styled(Button)`
  borderRadius: 0px !important;
`;