CODEWITHSUNDEEP
reactjsstyled-components
Ajhar Shaikh
Ajhar Shaikh

Reputation: 1124

Overriding react components styles with styled component

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

Upvotes: 10

Views: 32716

Answers (3)

Derek Saunders
Derek Saunders

Reputation: 411

There is a much easier way to accomplish this when you want to override a component with pre-existing styles.

Each Component in react comes with a theme property.

//the component you are trying to change the style of
import { AppBar } from 'react-toolbox/lib/app_bar';

//your stylesheet for the new component
import newTheme from './NewAppBar.css'

//inject your new stylesheet for the existing component
<AppBar {...props} theme={newTheme} />

Upvotes: 0

Denys Kotsur
Denys Kotsur

Reputation: 2599

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.

Upvotes: 11

Vynart
Vynart

Reputation: 105

<label style={{color: "green"}}>{this.props.children}</label>

or

const style = {color : "green"};
<label style={style}>{this.props.children}</label>

Upvotes: 0

Related Questions