我正在使用 amaterial-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>;}
4 回答
LEATH
TA贡献1936条经验 获得超6个赞
默认情况下，Material-UI 在元素的末尾注入样式<head>。这意味着它的样式将位于styled-components 生成的样式之后，因此当CSS 特异性相同时，Material-UI 样式将胜过 styled-components 样式。
您可以使用StylesProvider带有injectFirst属性的组件将 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>
);
}
神不在的星期二
TA贡献1963条经验 获得超6个赞
使用 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;
}
`;
森林海
TA贡献2011条经验 获得超2个赞
通过在StyledButton中添加className，可以覆盖MUI按钮样式，
<StyledButton className={'myclassName'}>Hello</styledButton>
const StyledButton = styled(Button)`
&.myclassName {
background-color: red,
border-radius: 0
}
`;
POPMUISE
TA贡献1765条经验 获得超5个赞
const StyledButton = styled(Button)({
'&&&': {
backgroundColor: red,
borderRadius: 0
}
)}
- 4 回答
- 0 关注
- 116 浏览
添加回答
举报
0/150
提交
取消