使用 styled-components 覆盖 Material-ui 按钮样式
我正在使用 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>;
}
jeck猫浏览 124回答 4
4回答
-
LEATH
默认情况下，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> );} -
神不在的星期二
使用 styled-components 更高特异性语法： https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificityconst StyledButton = styled(Button)` && { background-color: red; border-radius: 0; }`; -
森林海
通过在StyledButton中添加className，可以覆盖MUI按钮样式，<StyledButton className={'myclassName'}>Hello</styledButton>const StyledButton = styled(Button)` &.myclassName { background-color: red, border-radius: 0 }`; -
POPMUISE
const StyledButton = styled(Button)({ '&&&': { backgroundColor: red, borderRadius: 0 })}
随时随地看视频慕课网APP
相关分类
Html5