亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

更改反應/材料 ui 中的 TextField 顏色

更改反應/材料 ui 中的 TextField 顏色

守候你守候我 2021-12-12 18:02:58
我有一個帶有文本字段和按鈕的反應組件。我希望它們在黑色背景上顯示為綠色,并且我無法更改所有元素的默認顏色?;谶@個問題:如何更改 Material UI React 輸入組件的輪廓顏色?; 我能夠更改輪廓和標簽顏色。但是我找不到任何方法來更改用戶輸入的文本的顏色。我想我必須覆蓋另一個屬性,但我沒有找到哪個。預先感謝您幫助我。問候代碼 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貢獻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>了解詳情。 )


查看完整回答
反對 回復 2021-12-12
  • 1 回答
  • 0 關注
  • 232 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號