reactjs

관심있는 사람을 위해 css 모듈을 사용하고 css 모듈 에 반응 할 때 이와 동일한 문제가 발생했습니다 .

대부분의 구성 요소에는 연관된 CSS 모듈 스타일이 있으며이 예제에서 내 Button 에는 Promo 상위 구성 요소 와 마찬가지로 자체 CSS 파일이 있습니다. 하지만 몇 가지 추가 스타일을 전달하려는 버튼 에서 프로모션

따라서 style가능한 버튼은 다음과 같습니다.

Button.js

import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

class Button extends Component {

  render() {

    let button = null,
        className = ''

    if(this.props.className !== undefined){
        className = this.props.className
    }

    button = (
      <button className={className} styleName='button'>
        {this.props.children}
      </button>
    )

    return (
        button
    );
  }
};

export default CSSModules(Button, styles, {allowMultiple: true} )

위의 Button 구성 요소에서 Button.css 스타일은 일반적인 버튼 스타일을 처리합니다. 이 예에서는 .button클래스

그런 다음 Button 을 사용하려는 구성 요소에서 버튼 의 위치와 같은 사항도 수정하고 싶은 경우 추가 스타일을 설정 Promo.css하고 className소품 으로 전달할 수 있습니다 . 이 예에서는 다시 .button클래스 라고 합니다. 나는 그것을 예를 들어 무엇이든 부를 수 있었다 promoButton.

물론 css 모듈을 사용하면이 클래스는 .Promo__button___2MVMD다음과 같은 반면 버튼은 다음과 같습니다..Button__button___3972N

Promo.js

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';

import Button from './Button/Button'

class Promo extends Component {

  render() {

    return (
        <div styleName='promo' >
          <h1>Testing the button</h1>
          <Button className={styles.button} >
            <span>Hello button</span>
          </Button>
        </div>
      </Block>
    );
  }
};

export default CSSModules(Promo, styles, {allowMultiple: true} );