reactjsmaterial-uistyled-components

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


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"
}));

Solution

  • 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 }