Lets say I have these tabs below. How can I use the MUI primary and secondary colors for inline CSS? I would like to use colors from my palette to customize this.

            <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" : "" }} 
                />

Lets say I have these tabs below. How can I use the MUI primary and secondary colors for inline CSS? I would like to use colors from my palette to customize this.

            <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" : "" }} 
                />

• javascript
• reactjs
• material-ui

1 Answer 1

If you need to use inline styles, you can get the theme object via useTheme hook.

const theme = useTheme()

The theme object contains all data about Material-UI theme like color palette, breakpoints, zIndex... You can inspect the DefaultTheme object here.

return <Tabs {...props} style={{ backgroundColor: theme.palette.primary.main }} />

In MUI v5, you can use the sx prop to quickly add dynamic styles as an alternative to inline styles. It also has better integration with MUI theme as demonstrated by the 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>