拡張コンポーネントのclassNameをオーバーライドする方法は？

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; 

ページ私は違っそれを配置したい：私はこのISN」ので、メディアに クエリを使用する必要がなく、

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

私はコンポーネントに別のオプションのプロパティ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 2

<Label>はカスタムコンポーネントですので、classNameプロップを手動で渡すことができます。

これは、default propsの場合に適しています。何classNameがLabelに提供されていない場合

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

Label.defaultProps = { 
    className: styles.labelClass 
} 

そのように、それはそうでない場合、それは小道具を使用しますが、labelClassスタイルを使用します。

Answer 3

明示的Labelの小道具から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;