Как переопределить имя класса в расширенном компоненте?

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; 

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 className={styles.positionLeft} /> 
     </div> 
    ); 
    } 

} 

export default Page; 

Обычно я хотел бы сделать это с помощью пользовательского стиля, но я должен использовать средства массовой информации запросы так этого ISN» возможно в этой ситуации.

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; 

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; 

Answer 2

С <Label> является пользовательским компонентом, вы можете вручную передать className опора вниз.

Это хороший вариант использования для default props!

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

Label.defaultProps = { 
    className: styles.labelClass 
} 

Таким образом, если не className не предоставляется Label, он будет использовать labelClass стиль, в противном случае, он будет использовать опору.

Answer 3

Вы должны явно указать className свойство из реквизита Label «s - попробуйте:

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;