With styled-components, how can I target a child class of a component?-CodePudding

I'm using a mui Badge component and I want to style the little circle. I have:

const BadgeStyled = styled(Badge)`
  & > .muibadge-badge: {
    background-color: #d3d4d7;
    width: 15px;
    height: 15px;
  }
`;

The generated HTML is:

<span >
... some stuff
<span ></span></button><div ><span >J</span></div><span >4</span></span>

So I have MuiBadge-badge in the generated HTML, but my style doesn't seem to apply. Any tips would be greatly appreciated! Thanks!

CodePudding user response：

Your syntax is wrong, have a look at this working codesandbox

Here is how you can style the Badge component

const BadgeStyled = styled(Badge)({
  "& .MuiBadge-badge": {
    backgroundColor: "#d3d4d7",
    width: '15px',
    height: '15px',
  }
});