css - 在 Material UI 中将变量发送到 withStyles?
问题描述
我有以下内容:
class StyledInput extends React.Component{
styles = (color, theme) => ({
underline: {
borderBottom: `2px solid ${color}`,
'&:after': {
borderBottom: `2px solid ${color}`,
}
}
})
div = props => (
<TextField
placeholder="temp input"
InputProps={{
classes:{
root: props.classes.underline
},
style:{
height: '1.5rem',
fontSize:'1rem',
marginTop: '-1rem',
}
}}
>
<div>
{props.children}
</div>
</TextField>
)
Styled = withStyles(this.styles('white'))(this.div)
render(){
return(
<div>
<this.Styled>{this.props.children}</this.Styled>
</div>
);
}
}
export default StyledInput;
因此,它成功地获取了一个材质 UI 文本字段,并在用户单击该字段时将底部栏更改为白色,而不是蓝色。伟大的!
...然而...
我真正想做的是
<this.Styled color={someDefinedColor}>{this.props.children}</this.Styled>
然后Styled
看起来像这样:
Styled = (color) => withStyles(this.styles(color))(this.div)
这样我就可以动态地将颜色传递给Styled
属性。显然这是伪代码 - 我一直在玩它,但无法让它失败。作为一般性声明,material-ui 动态更改颜色有点令人讨厌,所以我想知道是否有人知道如何让它工作。
谢谢!
解决方案
下面是一个如何使用新的钩子语法来做到这一点的例子:
index.js
import React from "react";
import ReactDOM from "react-dom";
import StyledComponent from "./StyledComponent";
const CustomComponent = ({ children, className }) => {
return (
<p className={className}>
Just showing passing in the component to use rather than automatically
using a div.
<br />
{children}
</p>
);
};
function App() {
return (
<div className="App">
<StyledComponent color="green">
Here's my content with green underline
</StyledComponent>
<StyledComponent
component={CustomComponent}
color="blue"
hoverColor="orange"
>
Here's my content with blue underline that changes to orange on hover.
</StyledComponent>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
StyledComponent.js
import React from "react";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
root: {
borderBottom: ({ color }) => `2px solid ${color}`,
"&:hover": {
borderBottom: ({ color, hoverColor }) => {
const borderColor = hoverColor ? hoverColor : color;
return `2px solid ${borderColor}`;
}
}
}
});
const StyledComponent = ({
component: ComponentProp = "div",
children,
color,
hoverColor
}) => {
const classes = useStyles({ color, hoverColor });
return <ComponentProp className={classes.root}>{children}</ComponentProp>;
};
export default StyledComponent;
如果您愿意,您可以将此useStyles
方法放在它自己的文件中,并将其作为自定义钩子重新使用,以使其生成的类(仍然具有变量支持)可用于多个组件(而不仅仅是StyledComponent
)。