如何改变Material-UI的切换颜色

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

Material-UI 切换的颜色设置为 primary1Color，您可以通过制作自定义主题来覆盖它。 http://www.material-ui.com/#/customization/themes

您想在某个地方创建一个样式对象（一个单独的文件可能是最好的），其中包含如下对象：

{
    palette: {
        primary1Color: '#YOURCOLOR',
    },
}

假设您将其作为样式导入到您的 React class 中，您希望将其设置为这样的主题：

getChildContext() {
        return {
            muiTheme: getMuiTheme(Styles),
        };
    }

和

YOUR_CLASS.childContextTypes = {
    muiTheme: React.PropTypes.object,
};

Answer 2

如果您想在 'on mode' 中更改切换颜色，您需要更新主题中的颜色：

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

然后使用它:)

<MuiThemeProvider muiTheme={muiTheme}>

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

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

在 'off mode' 中更改切换颜色更容易：

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

希望对您有所帮助:)

Answer 3

您需要做的一切

thumbSwitchedStyle={{ backgroundColor: 'grey' }}

示例

<Toggle
     thumbSwitchedStyle={{ backgroundColor: 'grey' }}
     labelStyle={{color:'white'}}
     style={{marginTop:'.75em'}}
     label="Toggle Compare"

因此，如果选择颜色变为灰色:)

image

Answer 4

    const toggleStyles = makeStyles({
      root: { /* … */ },
      label: { /* … */ },
      outlined: {
        /* … */
        '&$disabled': { /* … */ },
      },
      outlinedPrimary: {
        /* … */
        '&:hover': { /* … */ },
       },
      disabled: {},
    }, { name: 'MuiButton' });

生成以下 class 个您可以覆盖的名称：

    .MuiButton-root { /* … */ }
    .MuiButton-label { /* … */ }
    .MuiButton-outlined { /* … */ }
    .MuiButton-outlined.Mui-disabled { /* … */ }
    .MuiButton-outlinedPrimary: { /* … */ }
    .MuiButton-outlinedPrimary:hover { /* … */ }

使用代码：

      function FunctionalComponent(props){
         const toggleClass = toggleStyles();
         
         return (
           <ToggleButtonGroup value={toggleValue} onChange ={handleToggleValueChange}>
              <ToggleButton value="toggleValue1" className={toggleClass.root}>VALUE 1</ToggleButton>
              <ToggleButton value="toggleValue2" className={toggleClass.outlined}>VALUE 2</ToggleButton>
           </ToggleButtonGroup>
         )
      }

更多详情：https://material-ui.com/styles/advanced/#with-material-ui-core

Answer 5

    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}  />)
}

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

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

如何改变Material-UI的切换颜色

How to change the color of Material-UI's Toggle

javascript

reactjs

material-ui