For example, in `styled-components` you can do the following:

```
const Div = styled.div`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
`;

render(
  <section>
    <Div>Normal</Div>
    <Div primary>Primary</Div>
  </section>
);

```

Can you get the same result with Material-UI v5 `styled` utility without adding overrides to the global theme object like the example in the [styled() docs](https://next.material-ui.com/system/styled/#custom-components)?