如何更改 Material-UI 的 Toggle 颜色

Question

So I put my Toggle button in my AppBar , which created an issue because they are the same color when the Toggle is selected.

I've tried many different things (as shown below), but have been unable to change it's color.

 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;

I'm not really sure how I can get to that element to change it's color. using Chrome, I was able to inspect the element and change it's color that way, but have been unable to repeat that with code.

I've also been unable to center the Toggle programmatically, but have been able to do it in chrome which makes be believe I'm not high enough in the object?

If that makes sense.

Thanks!

Answer 1

If you want change toggle color in 'on mode', you need to update colors in the theme:

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

and then use it :)

<MuiThemeProvider muiTheme={muiTheme}>

You can check here what other theme stuff is used by toggle: https://github.com/callemall/material-ui/blob/master/src/Toggle/Toggle.js

I don't know if that is the only way to do this but it seems to work :) There might be problem though if some other control uses that color path :/

Changing color of toggle in 'off mode' is easier:

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

Hope it helps :)

Answer 2

All you need to do

thumbSwitchedStyle={{ backgroundColor: 'grey' }}

Example

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

Thus, if selected the color becomes grey :)

image

Answer 3

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

Refer to this code and you will get what you need.

Click on this link for more information Material-Ui/Switch

Answer 4

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

generates the following class names that you can override:

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

To use the code:

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

      

For more details: https://material-ui.com/styles/advanced/#with-material-ui-core

Answer 5

The color of the Material-UI toggle is set to primary1Color, which you can over-ride by making a custom theme. http://www.material-ui.com/#/customization/themes

You'd want to make a styles object somewhere (a separate file is probably best) that contains an object like this:

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

Assuming you import that into your React class as Styles, you'd want to set it as the theme like this:

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

And

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