title: How can I add MUI theme color to inline style?
body: <p>Lets say I have these tabs below. How can I use the MUI <code>primary</code> and <code>secondary</code> colors for inline CSS? I would like to use colors from my palette to customize this.</p>
  <pre><code>            &lt;Tabs
                value={value}
                onChange={handleChange}
                variant='fullWidth'
                aria-label=&quot;simple tabs example&quot;
                className=&quot;tableViewTabs&quot;
                centered
                color=&quot;primary&quot;
                // inkBarStyle={{backgroundColor: '#68C222', width: '33.3%'}}
                // tabItemContainerStyle={{backgroundColor: '#FFFFFF', width: '30%'}} 
            &gt;
                  &lt;Tab
                    icon={&lt;GradeIcon/&gt;}
                    {...a11yProps(0)}
                    disableFocusRipple={true}
                    disableRipple = {true}
                    color=&quot;primary&quot;
                    style={{ textTransform: &quot;none&quot;, fontSize: 16, color: value === 0 ? &quot;&quot; : &quot;&quot; }}
                  /&gt;
                  &lt;Tab
                      icon={&lt;ViewAgendaIcon /&gt;}
                      {...a11yProps(1)}
                      disableFocusRipple={true}
                  disableRipple={true}
                  style={{ textTransform: &quot;none&quot;, fontSize: 16, fontWeight: value === 1 ? &quot;bold&quot; : &quot;&quot; }} 
                  /&gt;
                  &lt;Tab
                      icon={&lt;AppsIcon /&gt;}
                      {...a11yProps(2)}
                      disableFocusRipple = {true}
                      disableRipple = {true}
                      style={{ textTransform: &quot;none&quot;, fontSize: 16, fontWeight: value === 2 ? &quot;bold&quot; : &quot;&quot; }} 
                  /&gt;
  </code></pre>