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

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>是自定义组件，可以手动传className向下支撑。

这是 default props 的一个很好的用例!

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

Label.defaultProps = {
  className: styles.labelClass
}

那样的话，如果没有className提供给Label , 它将使用 labelClass风格，否则，它将使用 Prop 。