Overriding react components styles with styled component

Question

I tried to override style of component created by standard way of styled-components(styled.) and both the ways(styled() and style.extends) worked for me.

But when I am trying to override style of simple react component with styled() approach, its rendering the component but not overriding it's style.

Below is snippet of code

import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;

And for display purpose I am using following syntax

<StyledMyLabel>My Styled Label</StyledMyLabel>

Please refer the link on codesandbox which might be useful

Denys Kotsur Denys Kotsur · Accepted Answer · 2018-08-16T07:52:57

You have to pass className to desirable styling element manually to make it works.

import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label className={this.props.className}>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;

NOTE:

Consider carefully whether to wrap your own components in a styled component, when it isn't necessary. You will disable the automatic whitelisting of props, and reverse the recommended order of styled components and structural components.

See more info here.

Overriding react components styles with styled component

2 Answers