How to override className on extended component?

Question

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.

score 3 · Answer 1 · answered Dec 01 '16 at 13:13

3

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.

answered Dec 01 '16 at 13:13

BradByte

11,015
2
37
41

Or use [classnames](http://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component) to apply more than one class. – Andre Lee Dec 01 '16 at 13:18
That would be a possibility, the post made it sound more like a replacement than concatenation. – BradByte Dec 01 '16 at 13:21

score 2 · Accepted Answer · answered Dec 01 '16 at 13:50

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;

score 1 · Answer 3 · answered Dec 01 '16 at 13:16

1

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;

answered Dec 01 '16 at 13:16

Jonathan Windridge

397
3
13

Valid answer, but you've basically created a manual implementation of defaultProps. – BradByte Dec 01 '16 at 13:18
I saw your answer after I'd finished writing mine - indeed I have! You learn something new every day I guess... \*goes away to refactor codebase\* – Jonathan Windridge Dec 01 '16 at 13:23
Haha I know right... it's amazing how much out there is underutilized and unknown. I remember when I wrote my own equivalent of `Promise.all` – BradByte Dec 01 '16 at 13:28

How to override className on extended component?

3 Answers3