javascript - 如何将 MUI 主题颜色添加到内联样式？

Question

可以说我在下面有这些标签。如何使用 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" : "" }} 
                />

Answer 1

如果需要使用内联样式，可以获取 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>