Material UI selected Tab styling

Question

I am trying to apply styling via styled components to a Material UI Tab component when it has a selected prop value of true, but I'm not having any luck. According to the Material UI API documentation, the Tab component will gain a css class when the selected prop has a true value, which it does, but none of the styling that I'm trying to apply to that css class is actually being applied.

Tab component:

const StyledTab = styled(({ ...props }) => (
  <Tab {...props} classes={{ selected: "selected" }} />
))`
  & .selected {
    background-color: yellow;
  }
`;

Application:

function StyledComponentsTab() {
  return (
    <div>
      <StyledTab label="test" selected />
    </div>
  );
}

codesandbox example

Shawn Andrews Shawn Andrews · Accepted Answer · 2018-11-26T03:13:01

The style isn't being applied because you need to override the library's style via !important. It should look like background-color: yellow !important;.

Also your .selected css rule doesn't apply to the component because the selected text on your component is an attribute not a class. The .selected rule applies to html elements with className="selected".

Here is your code example with the style applied: https://codesandbox.io/s/72o992lv36

Material UI selected Tab styling

1 Answers