How can I add Material-UI theme color to inline style?

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

Answer

You can use useTheme hook to get the theme object injected from the ThemeProvider.

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

Leave a Reply

Your email address will not be published. Required fields are marked *