Targeting a styled component in React with a webpack generated identifier?

Question

I have a component called LargeDialog which encapsulates a StyledDialogContent (both of which are from the Dialog class of the Material UI library).

LargeDialog.jsx

...

const StyledDialogContent = styled(DialogContent)`
  padding: 30px;
`; 


class LargeDialog extends Component {

...
  render(){
    return (<StyledDialogContent> ... </StyledDialogContent>) // Some content within.
  }

}

...

The styled components adds a padding: 30px to the DialogContent.

I would like to override this with padding: 0px if the LargeDialog modal is reused in another place.

However, the generated webpack CSS has a random identifier i.e. MuiDialogContentroot-0-3-439 FullDialogModal__StyledDialogContent-ogd6um-6 iMpISc and I'm not sure how to target this.

AnotherComponent.jsx

import LargeDialog from './LargeDialog'
...

const LargeDialogWrapper = styled(LargeDialog)`

  // What do I put here to override StyledDialogContent with a random identifier?

`;

class AnotherComponent extends Component {

}
...

I tried exporting StyledDialogContent and targetting it as such:

import LargeDialog, {StyledDialogContent} from './LargeDialog'

...

const LargeDialogWrapper = styled(LargeDialog)`
  ${StyledDialogContent} {
    padding: 0px;
  }
`;

But that didn't work too.

Example:

https://codesandbox.io/embed/styled-components-d5pzv?fontsize=14&hidenavigation=1&theme=dark

Dennis Vash Dennis Vash · Accepted Answer · 2019-11-21T19:19:32

You target it within the style like so:

const Box = styled.div`
  background-color: black;
  height: 100px;
`;

const Yellow = styled.div`
  background-color: blue;
  height: 200px;
  ${Box} {
    background-color: yellow;
  }
`;

const App = () => {
  return (
    <>
      <Box />
      <Yellow>
        <Box />
      </Yellow>
    </>
  );
};

Refer to the related docs section.

If it helps, you can check this example file (note the Heading style for example).

An edit after OP question update

In your example, you missing className if you want to enable styling for your components.

Also, you need WrapperDiv to be a direct child, this is how the CSS works, remember that you writing simple CSS just in javascript:

class LargeDialog extends Component {
  render() {
    return (
      <WrapperDiv className={this.props.className}>
        <div>{this.props.children}</div>
      </WrapperDiv>
    );
  }
}

const WrapperLargeDialog = styled(LargeDialog)`
  ${WrapperDiv} {
    background-color: blue;
  }
`;
// LargeDialog should be red.
// WrapperLargeDialog should be blue.
class App extends Component {
  render() {
    return (
      <div>
        <LargeDialog />
        <br />
        <WrapperLargeDialog>
          <WrapperDiv />
        </WrapperLargeDialog>
      </div>
    );
  }
}

Targeting a styled component in React with a webpack generated identifier?

1 Answers