1 回答

TA貢獻1825條經驗 獲得超6個贊
只需添加一個簡單的 HOC withStyles。
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
root: {
background: "black"
},
input: {
color: "#2EFF22"
}
};
class TestComponent extends React.Component {
render() {
const { classes } = this.props;
return (
<div
style={{
display: "flex",
flexDirection: "column",
backgroundColor: "black"
}}
>
<TextField
id="Password"
variant="outlined"
required
label="Password"
InputProps={{
className: classes.input
}}
style={{ width: "150px", margin: "20px" }}
/>
<Button
style={{ width: "150px", margin: "20px" }}
color="primary"
variant="contained"
onClick={() => console.log("OK")}
>
OK
</Button>
</div>
);
}
}
export default withStyles(styles)(TestComponent);
給你,工作鏈接:https : //codesandbox.io/s/wizardly-river-gd4d2
(需要注意的是,因為你有工作<TextField>,這是對像其他組件之上的抽象<FormControl>,<InputLabel>等等,你不能只是通過你的風格融于<TextField>直接,你必須使用<InputProps>請參閱MUI API。<TextField>了解詳情。 )
添加回答
舉報