How to use mui styled on react components and to change style inside the wrapped component?

Question

In the code below: How can I change the border-bottom property inside Header inside SpecialTabs ith styled? Thanks!!

const SpecialTabs = () => {
  const Header = styled.div`
  position: relative;
  border-bottom: 1px solid red;
`;
  return (
    <Header>
      <Tabs>
        ...
      </Tabs>
    </Header>
  )
}

const StyledTabs = styled(SpecialTabs)(() => ({
  " & .Mui-disabled": {
    padding: 0,
  },
}));

const App = () => {
  return (
    <StyledTabs>
      ...
    </StyledTabs>
  )
}

What I tried (but doesnt work):

const StyledTabs = styled(SpecialTabs)(() => ({
  " & .Mui-disabled": {
    padding: 0,
  },
  borderBottom: "none"
}));

Answer 1

One way is to conditionally render border using prop, like this:

const Header = styled('div')(({ removeBorder }) => ({   
  borderBottom: removeBorder ? 'none' : '1px solid red', 
})); 

than use Header like this <Header removeBorder={true}>

and in the App it will look like this

<StyledTabs removeBorder> ... </StyledTabs>

here's fiddle so you can check it out -> FIDDLE

Another way could be to pass className to Header, but haven't test this so I can't confirm

<Header className="header"> and target it in StyledTabs

'& .header': { border: none }