可以说我在下面有这些标签。如何使用 MUI primary
和 secondary
内联 CSS 的颜色?我想使用我调色板中的颜色来自定义它。
<Tabs
value={value}
onChange={handleChange}
variant='fullWidth'
aria-label="simple tabs example"
className="tableViewTabs"
centered
color="primary"
// inkBarStyle={{backgroundColor: '#68C222', width: '33.3%'}}
// tabItemContainerStyle={{backgroundColor: '#FFFFFF', width: '30%'}}
>
<Tab
icon={<GradeIcon/>}
{...a11yProps(0)}
disableFocusRipple={true}
disableRipple = {true}
color="primary"
style={{ textTransform: "none", fontSize: 16, color: value === 0 ? "" : "" }}
/>
<Tab
icon={<ViewAgendaIcon />}
{...a11yProps(1)}
disableFocusRipple={true}
disableRipple={true}
style={{ textTransform: "none", fontSize: 16, fontWeight: value === 1 ? "bold" : "" }}
/>
<Tab
icon={<AppsIcon />}
{...a11yProps(2)}
disableFocusRipple = {true}
disableRipple = {true}
style={{ textTransform: "none", fontSize: 16, fontWeight: value === 2 ? "bold" : "" }}
/>
最佳答案
如果需要使用内联样式,可以获取 theme
对象来自 useTheme
钩。
const theme = useTheme()
主题对象包含有关 Material-UI 主题的所有数据,如调色板、断点、zIndex... 您可以检查 DefaultTheme
对象 here .return <Tabs {...props} style={{ backgroundColor: theme.palette.primary.main }} />
在 MUI v5 ,您可以使用 sx
prop快速添加动态样式作为内联样式的替代方案。它还与 MUI 主题有更好的集成,如 following examples 所示。 :<Box sx={{ color: 'text.secondary' }}>Text</Box>
<div style={{ color: theme.palette.text.secondary }}>Text</Box>
<Box sx={{ border: 1 }}>Text</Box>
<div style={{ border: '1px solid black' }}>Text</Box>
<Box sx={{ borderRadius: 2 }}>Text</Box>
<div style={{ borderRadius: theme.shape.borderRadius * 2 }}>Text</Box>
<Box sx={{ mx: 2 }}>Text</Box>
<div style={{ margin: `0 ${theme.spacing(2)}` }}>Text</Box>
<Box sx={{ fontWeight: 'fontWeightLight' }}>Text</Box>
<div style={{ fontWeight: theme.typography.fontWeightLight }}>Text</Box>
<Box sx={{ zIndex: 'tooltip' }}>Text</Box>
<div style={{ zIndex: theme.zIndex.tooltip }}>Text</Box>
<Box sx={{ boxShadow: 1 }}>Text</Box>
<div style={{ boxShadow: theme.shadows[1] }}>Text</Box>
关于javascript - 如何将 MUI 主题颜色添加到内联样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66912925/