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

时间:2016-08-15 15:09:48

标签: javascript reactjs material-ui

所以我将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中执行此操作,这让我相信我的对象不够高?

如果这是有道理的。

谢谢!

5 个答案:

答案 0 :(得分:8)

如果您希望在模式&#39;中更改切换颜色,则需要更新主题中的颜色:

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

然后使用它:)

<MuiThemeProvider muiTheme={muiTheme}>

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

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

在“关闭”模式下更改切换颜色&#39;更容易:

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

希望有所帮助:)

答案 1 :(得分:1)

你需要做的一切

thumbSwitchedStyle={{ backgroundColor: 'grey' }}

示例

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

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

image

答案 2 :(得分:1)

    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

答案 3 :(得分:0)

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

生成以下可以覆盖的类名:

    .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

答案 4 :(得分:-1)

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

你想在某个地方制作一个样式对象(一个单独的文件可能是最好的),它包含一个像这样的对象:

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

假设您将其作为样式导入到React类中,您可能希望将其设置为主题,如下所示:

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

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