CODEWITHSUNDEEP
javascriptcssreactjs
Jim Peeters
Jim Peeters

Reputation: 2863

How to override className on extended component?

I am trying to position this component differently on a certain page. But when I provide it with another className property it is only using the original class's styling that was provided when declaring the component.

Component: 

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {
    return (
      <div className={styles.labelClass} />
    );
  }
}

export default Label;

Page where I want to position it differently: 

import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';

class Page extends Component {

  render() {
    return (
      <div>
          <Label className={styles.positionLeft} />
      </div>
    );
  }

}

export default Page;

Normally I would do this with custom styling but I have to use media queries so this isn't possible in this situation.

Upvotes: 5

Views: 16411

Answers (3)

Jim Peeters
Jim Peeters

Reputation: 2863

I fixed it by adding another optional property customClass to the component.

Label

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {
    return (
      <div className={styles.labelClass + ' ' + this.props.customClass} />
    );
  }
}

export default Label;

Page

import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';

class Page extends Component {

  render() {
    return (
      <div>
          <Label customClass={styles.positionLeft} />
      </div>
    );
  }

}

export default Page;

Upvotes: 2

Jonathan Windridge
Jonathan Windridge

Reputation: 407

You need to explicitly reference the className property from Label's props - try:

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {

    let { className } = this.props

    if (!className) {
      className = styles.labelClass
    }

    return (
      <div className={className} />
    );
  }
}

export default Label;

Upvotes: 1

BradByte
BradByte

Reputation: 11093

Since <Label> is a custom component, you can to manually pass the className prop down.

This is a good use case for default props!

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

Label.defaultProps = {
  className: styles.labelClass
}

That way, if no className is provided to Label, it will use the labelClass style, otherwise, it will use the prop.

Upvotes: 4

Related Questions