Overriding

For some reason I thought this would work:

const Block = styled.div`
  background-color: blue;
  color: white;
`;

// Override Block and give it a red background, using all other styles (i.e. just adding another class that overrides the background-color
const EmergencyBlock = styled(Block)`
  background-color: red;
`;

Can we make this work? That would be a great overriding mechanism.

[mxstbr]

You need to attach the class:

function Block(props){
 return <div className={props.className}></div>
}

styled-components injects a class with the given styling. If you don’t attach it to a DOM node, you’re not attaching it a DOM node, so it can’t be in the DOM!

[davibe]

would it be possible pass the desired className to the styled function ? Maybe this is more a feature request. i.e.

const MyComponent = () => <div className="my-component"> ... </div>
module.exports = styled(component, {className: 'my-component'})`
    ...
`

I don’t like that my component has to behave (attach the custom className) as styled wants it to. I think the component should be agnostic.