[英]Material UI Toggle Button Color
I am using the ToggleButton Group and ToggleButton components, but I cannot get the font color to be different than the background color.我正在使用 ToggleButton Group 和 ToggleButton 组件,但无法使字体颜色与背景颜色不同。 Right now I'm using a black body background and want the clicked/active button to have a white background with black text.
现在我正在使用黑色主体背景,并希望点击/活动按钮具有白色背景和黑色文本。 I'm using themes to have a toggle.
我正在使用主题进行切换。 My buttons are setup like so:
我的按钮设置如下:
import { ToggleButtonGroup, ToggleButton } from '@mui/material'
const Header = ({onScenario1Change, onScenario2Change, onScenario3Change }) => {
const [alignment, setAlignment] = useState('left')
const handleAlignment = (e, newAlignment) => {
setAlignment(newAlignment)
}
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
variant="outlined"
color="primary"
>
<ToggleButton color="primary" value="left" onClick={onScenario1Change}>Scenario 1</ToggleButton>
<ToggleButton color="primary" value="center" onClick={onScenario2Change}>Scenario 2</ToggleButton>
<ToggleButton color="primary" value="right" onClick={onScenario3Change}>Scenario 3</ToggleButton>
</ToggleButtonGroup>
)
}
And my theme is setup like so:我的主题设置如下:
import { createTheme } from "@mui/material/styles";
export const darkTheme = createTheme({
palette: {
primary: {
main: '#FeFeFe',
contrastText: '#000000'
},
background: {
default: '#000000',
},
divider: '#fefefe',
},
components: {
MuiToggleButton: {
"&.Mui-selected": {
color: "#000000",
backgroundColor: '#fefefe'
}
}
}
})
Ready to never use MUI again after this.准备在此之后不再使用 MUI。 Any help in figuring out this override would be greatly appreciated!!
任何帮助找出这个覆盖将不胜感激!!
Ok so I got it working after a few refactors.好的,经过几次重构后我让它工作了。
color={primary}
prop removedcolor={primary}
属性action: selectedOpacity
, as well as root specified before Mui-selected
.action: selectedOpacity
,以及在Mui-selected
之前指定的 root 。&:hover
also had to be added to make the hover effect match the selected look. &:hover
也必须添加以使 hover 效果与所选外观匹配。import { ToggleButtonGroup, ToggleButton, styled } from '@mui/material'
const Header = ({onScenario1Change, onScenario2Change, onScenario3Change, theme }) => {
const [alignment, setAlignment] = useState('left')
const handleAlignment = (e, newAlignment) => {
setAlignment(newAlignment)
}
let fill = theme ? '#000000' : "#fefefe"
const CustomToggle = styled(ToggleButton)({
color: fill
})
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
variant="outlined"
color="primary"
>
<CustomToggle value="left" onClick={onScenario1Change}>Scenario 1</CustomToggle>
<CustomToggle value="center" onClick={onScenario2Change}>Scenario 2</CustomToggle>
<CustomToggle value="right" onClick={onScenario3Change}>Scenario 3</CustomToggle>
</ToggleButtonGroup>
)
}
export const darkTheme = createTheme({
palette: {
primary: {
main: '#FeFeFe',
contrastText: '#000000'
},
background: {
default: '#000000',
},
divider: '#fefefe',
action: {
selectedOpacity: .95
}
},
components: {
MuiToggleButton: {
styleOverrides: {
root: {
"&.Mui-selected": {
color: "#000000",
backgroundColor: '#fefefe'
},
"&:hover": {
color: '#000000',
backgroundColor: '#fefefe'
}
}
}
}
}
})
Hope this helps someone in the future!希望这对将来的人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.