首頁(yè) 猿問更改反應(yīng)/材料 ui 中的...

更改反應(yīng)/材料 ui 中的 TextField 顏色

JavaScript

守候你守候我 2021-12-12 18:02:58

我有一個(gè)帶有文本字段和按鈕的反應(yīng)組件。我希望它們?cè)诤谏尘吧巷@示為綠色，并且我無法更改所有元素的默認(rèn)顏色?；谶@個(gè)問題：如何更改 Material UI React 輸入組件的輪廓顏色？; 我能夠更改輪廓和標(biāo)簽顏色。但是我找不到任何方法來更改用戶輸入的文本的顏色。我想我必須覆蓋另一個(gè)屬性，但我沒有找到哪個(gè)。預(yù)先感謝您幫助我。問候代碼 App.js ：import TestComponent from './TestComponent.js'import {ThemeProvider } from '@material-ui/core/styles';import theme from './Theme.js'function App() { return ( <ThemeProvider theme={theme}> <div> <TestComponent/> </div> </ThemeProvider> );}export default App;來自 Theme.js 的代碼const Theme = createMuiTheme({ palette: { primary: { main: '#2EFF22', }, secondary: { main: '#22BF19' }, grey: { main: '#22BF19' } }, overrides: { MuiOutlinedInput: { root: { position: 'relative', '& $notchedOutline': { borderColor: '#2EFF22', }, '&:hover:not($disabled):not($focused):not($error) $notchedOutline': { borderColor: '#2EFF22', // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { borderColor: '#2EFF22', }, }, '&$focused $notchedOutline': { borderColor: '#2EFF22', borderWidth: 1, }, }, }, MuiFormLabel: { root: { '&$focused': { color: '#2EFF22' } } } }})export default Theme

查看完整描述

1 回答

胡子哥哥

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊

只需添加一個(gè)簡(jiǎn)單的 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

（需要注意的是，因?yàn)槟阌泄ぷ?lt;TextField>，這是對(duì)像其他組件之上的抽象<FormControl>，<InputLabel>等等，你不能只是通過你的風(fēng)格融于<TextField>直接，你必須使用<InputProps>請(qǐng)參閱MUI API。<TextField>了解詳情。 )

反對(duì) 回復(fù) 2021-12-12