所以我将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中执行此操作,这让我相信我的对象不够高?
如果这是有道理的。
谢谢!
答案 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"
因此,如果选择颜色变为灰色:)
答案 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,
};