如何覆盖扩展组件上的类名称？

Question

我试图在某个页面上以不同的方式定位此组件。但是，当我为它提供另一个className属性时，它只使用声明组件时提供的原始类的样式。

组成部分：

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

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

export default Label;

我想以不同的方式定位的页面：

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;

通常情况下，我会使用自定义样式进行此操作，但我必须使用媒体查询，因此在这种情况下，这是不可能的。

Answer 1

您需要从Label的props中显式引用className属性-请尝试：

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;

Answer 2

我通过向组件添加另一个可选属性customClass来修复它。

标签

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;

页

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;

Answer 3

自<代码>

这是一个很好的默认道具使用案例！

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

Label.defaultProps = {
  className: styles.labelClass
}

这样，如果没有为标签提供类名，它将使用标签类样式，否则，它将使用道具。