如何更改 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 中做到这一点，这让人相信我在对象中不够高？

如果这是有道理的。

谢谢！

原文由 Elad Karni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您想在“开启模式”下更改切换颜色，则需要更新主题中的颜色：

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

然后使用它:)

 <MuiThemeProvider muiTheme={muiTheme}>

您可以在这里查看 toggle 使用了哪些其他主题内容： https://github.com/callemall/material-ui/blob/master/src/Toggle/Toggle.js

我不知道这是否是执行此操作的唯一方法，但它似乎有效 :) 如果其他控件使用该颜色路径，则可能会出现问题：/

在“关闭模式”下更改切换颜色更容易：

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

希望能帮助到你 ：）

原文由 Marek Rozmus 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Shahnad S 发布，翻译遵循 CC BY-SA 4.0 许可协议