如何更改Material-UI的Toggle的颜色

Question

所以我把我的Toggle按钮放在我的AppBar,这产生了一个问题,因为它们在Toggle选择时是相同的颜色.

我尝试了很多不同的东西(如下所示),但却无法改变它的颜色.

import React from 'react';
import Toggle from 'material-ui/Toggle'
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

var Style =
{
    palette:
    {
      primary1Color: '#ffffff',
    },
};

class AppBarComp extends React.Component {

  constructor() {
    super();
    this.state = {
      open: false
    };
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(Style)};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <AppBar
          onLeftIconButtonTouchTap={this.handleToggle}
          title="Time Visualizer"
          iconElementRight={
            <Toggle
              labelStyle={{color:'white'}}
              style={{marginTop:'.75em'}}
              label="Toggle Compare"
            />
          }/>

        <Drawer
          docked={false}
          width={250}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
        <MenuItem onTouchTap={this.handleClose}>Settings</MenuItem>
          <MenuItem onTouchTap={this.handleClose}>About</MenuItem>
        </Drawer>
      </div>
  </MuiThemeProvider>
  }
}

AppBarComp.childContextTypes ={
  muiTheme: React.PropTypes.object,
};
export default AppBarComp;

我不确定如何能够改变它的颜色.使用Chrome,我能够检查元素并以这种方式改变它的颜色,但是无法用代码重复它.

我也无法以Toggle编程方式集中,但是能够在chrome中做到这一点,让我相信我对象不够高？

如果这是有道理的.

谢谢!

Answer 1

如果要在"开启模式"下更改切换颜色,则需要更新主题中的颜色:

const muiTheme = getMuiTheme({
  toggle: {
    thumbOnColor: 'yellow',
    trackOnColor: 'red'
  }
});

然后用它:)

<MuiThemeProvider muiTheme={muiTheme}>

你可以在这里查看切换使用的其他主题内容:https: //github.com/callemall/material-ui/blob/master/src/Toggle/Toggle.js

我不知道这是否是唯一的方法,但它似乎工作:)虽然如果其他控件使用该颜色路径可能有问题:/

在"关闭模式"中更改切换颜色更容易:

<Toggle 
  thumbStyle={{ backgroundColor: 'red' }} 
  trackStyle={{ backgroundColor: 'green' }} />

希望能帮助到你 :)

Answer 2

    import {Switch,makeStyles} from "material-ui/core"
     
    const useStyles = makeStyles((theme) => ({
     toggle: {
             width:50,
            '& .Mui-checked': {
               color: '#109125',
               transform:'translateX(25px) !important'
           },
           '& .MuiSwitch-track': {
               backgroundColor:'#008000e0'
           }
       },
    })   

const Index= (props) => {
    const classes = useStyles(); 
       return( 
    <Switch color="primary" size="small" className={classes.toggle} checked: {true}  />)
}

参考这段代码，你就会得到你所需要的。

单击此链接了解更多信息Material-Ui/Switch