Wie ändere ich die Farbe der Material-UI's Toggle

Question

So habe ich meine Toggle Schaltfläche in meine AppBar, die ein Problem verursacht, da sie die gleiche Farbe haben, wenn die Toggle ausgewählt ist.

Ich habe viele verschiedene Dinge ausprobiert (wie unten gezeigt), konnte aber die Farbe nicht ändern.

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;

Ich bin nicht wirklich sicher, wie ich auf dieses Element zu bekommen, es ist die Farbe zu ändern. Mit Chrome konnte ich das Element untersuchen und seine Farbe ändern, konnte dies jedoch mit Code nicht wiederholen.

Ich war auch nicht in der Lage, die Toggle programmgesteuert zu zentrieren, aber in der Lage, es in Chrom zu tun, was glauben lässt, ich bin nicht hoch genug in dem Objekt?

Wenn das Sinn macht.

Danke!

Answer 1

Wenn Sie Toggle Farbe wollen in ‚On-Modus‘ ändern, müssen Sie die Farben in dem Thema aktualisieren:

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

und dann verwenden Sie es :)

<MuiThemeProvider muiTheme={muiTheme}> 

Sie können hier überprüfen, was anderes Thema Material wird durch Umschalten verwendet: https://github.com/callemall/material-ui/blob/master/src/Toggle/Toggle.js

ich weiß nicht, ob das der einzige Weg, dies zu tun, aber es scheint zu funktionieren :) es könnte Problem sein, obwohl, wenn eine andere Steuerung verwendet diese Farbe Pfad:/

ändern Farbe des Toggle-in 'Aus-Modus' ist einfacher:

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

Hoffe, es hilft :)

Answer 2

Die Farbe des Material-UI-Schalters ist auf primary1Color eingestellt, die Sie durch Erstellen eines benutzerdefinierten Designs übersteuern können. http://www.material-ui.com/#/customization/themes

Sie würden wollen ein Stile machen das Objekt irgendwo (eine separate Datei ist wahrscheinlich am besten), der enthält ein Objekt wie folgt aus:

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

Sie Angenommen importieren, dass in Ihrem als Stile Reagieren Klasse, Sie Würd es als Thema wie folgt festlegen möchten:

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

Und

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

Answer 3

Alles, was Sie

thumbSwitchedStyle={{ backgroundColor: 'grey' }} 

Beispiel

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

tun müssen

Also, wenn ausgewählt die Farbe wird grau :)

image