使用 styled-components 覆盖 material-ui 按钮样式
Posted
技术标签:
【中文标题】使用 styled-components 覆盖 material-ui 按钮样式【英文标题】：Override material-ui button styles with styled-components 【发布时间】：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>;
【问题讨论】：
【参考方案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;
`;
【讨论】：
以上是关于使用 styled-components 覆盖 material-ui 按钮样式的主要内容，如果未能解决你的问题，请参考以下文章
使用 Styled-Components 在 React Bootstrap 中覆盖嵌套样式
styled-components不能覆盖antd组件样式?
Storybook + Ionic React + styled-components CSS 顺序问题