Method 1:
const StyledTextField = styled(({ ...rest }) => (
<OutlinedInput {...rest} classes={{ root: 'outlinedRoot' }} />
))`
.outlinedRoot {
.$notchedOutline {
border-color: red;
}
}
background: #fff;
border-radius: 4px;
color: #808080;
height: 53px;
`;
Method 2:
const StyledTextField = styled(OutlinedInput).attrs({
classes: { root: 'outlinedRoot', notchedOutline: 'notchedOutline' }
})`
.outlinedRoot {
.notchedOutline {
border-color: red;
}
}
background: #fff;
border-radius: 4px;
color: #808080;
height: 53px;
`;
我也看到了需要添加哪些类并阅读有关该类的文章,但是我无法覆盖
我尝试了以上两种方法来更改轮廓颜色,但我无法做到这一点
以下是执行此操作的一种方法的示例。要使用TextField
而不是进行此操作OutlinedInput
,只需在之前添加一个空格,.MuiOutlinedInput-root
以便将其作为的后代进行TextField
匹配,而不是将其与根元素上的其他类之一进行匹配。.MuiOutlinedInput-root
除了帮助CSS特定性之外,对于样式来说实际上是不必要的。
import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import styled from "styled-components";
const StyledOutlinedInput = styled(OutlinedInput)`
&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: green;
}
&:hover.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: red;
}
&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: purple;
}
`;
function App() {
return (
<div className="App">
<StyledOutlinedInput defaultValue="My Default Value" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
相关答案:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句