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>元素的末尾注入样式。这意味着其样式将排在之后，由样式组件生成，因此CSS specificity相同时，Material-UI样式将胜过样式组件样式。

您可以将StylesProvider组件与injectFirst属性一起使用，以将Material-UI样式移至<head>的开头，然后是样式化的组件样式，然后是赢。

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

Answer 2

使用样式化组件更高的特异性语法： 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

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

Answer 4

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

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

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

Answer 5

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

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

用样式化的组件覆盖Material-UI按钮样式

5 个答案: