我试图使用style-components来样式一个select组件的下划线.我成功地样式了一个Input组件的下划线.我知道Select是Input的一个封装器,但由于某些原因,同样的代码不能用于Select。
import Select from "@material-ui/core/Select";
import styled from "styled-components";
const StyledSelect = styled(Select)`
&& {
&& .MuiInput-underline {
border-bottom: 2px solid green;
}
/* default */
.MuiInput-underline:before {
border-bottom: 2px solid green;
}
/* hover (double-ampersand needed for specificity reasons. */
&& .MuiInput-underline:hover:before {
border-bottom: 2px solid lightblue;
}
/* focused */
.MuiInput-underline:after {
border-bottom: 2px solid red;
}
}
`;
export default StyledSelect;
主要的问题是你的目标是 MuiInput-underline
类,仿佛它是一个 子孙 的 Select
但根div(就是那个由 styled-components
类名将被应用到)的 Select
是具有以下特征的元素 MuiInput-underline
类。
下面是一个正确语法的例子。
import Select from "@material-ui/core/Select";
import styled from "styled-components";
const StyledSelect = styled(Select)`
/* default */
&.MuiInput-underline:before {
border-bottom: 2px solid green;
}
/* hover */
&.MuiInput-underline:hover:before {
border-bottom: 2px solid lightblue;
}
/* focused */
&.MuiInput-underline:after {
border-bottom: 2px solid red;
}
`;
export default StyledSelect;
我还对 索引.js 来包裹所有的东西 <StylesProvider injectFirst>
. 一般来说,当你使用 styled-components
和Material-UI,这样Material-UI样式就会在 <head>
而不是最后一个。然后是 styled-components
样式将排在Material-UI样式之后,并在其他特殊性相同时获胜。这就避免了需要在类名中使用双倍的名字(例如,使用 &&
)一样可以增加特异性。
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./demo";
import { StylesProvider } from "@material-ui/core/styles";
ReactDOM.render(
<StylesProvider injectFirst>
<Demo style={{ width: "200px" }} value={1} />
</StylesProvider>,
document.querySelector("#root")
);