使用 styled-components 覆盖 material-ui 按钮样式答案

【问题标题】：Override material-ui button styles with styled-components使用 styled-components 覆盖 material-ui 按钮样式
【发布时间】：2020-06-28 13:16:54
【问题描述】：

我正在使用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>;
}

【问题讨论】：

标签： html css reactjs material-ui styled-components

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

默认情况下，Material-UI 在<head> 元素的末尾注入样式。这意味着它的样式将在 styled-components 生成的样式之后出现，因此当CSS specificity 相同时，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>
  );
}

相关答案：

Media Queries in Material-UI Using Styled-Components

【讨论】：

我认为这实际上是基于 ops question 和 Material UI Docs 的正确答案。
使用injectFirst 将样式移动到head 的开头，但也会导致将meta 标签推到它们下面，W3C 验证器会发出一些关于“在之后找到的元元素上的字符集属性”的错误前 1024 个字节”。有什么想法吗？
@n4m31ess_c0d3r 文档here 提供了有关如何控制精确插入点的详细信息。

【解决方案5】：

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

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

【讨论】：