反応成分が考慮されないCSS

Question

この反応成分を使用していますhttps://github.com/mzabriskie/react-flipcard。

私はこのような、そのサイズを指定しようとしています。このように輸入

.largeDiv { 
    width: 500px; 
    height: 500px; 
} 

：このcssファイルを使用して

<FlipCard type="vertical" className="largeDiv"> 
       <div>Bad!!!!</div> 
       <div>Good!!!!</div> 
</FlipCard> 

を私はそのサイズを変更し

import '../assets/style.css'; 

cssしかし、まだページには、フリップカードはdoe sn'tの変更：

<FlipCard type="vertical" style={{width: '500px',height: '500px'}}> 

が、効果なしと：

私はまた、このように試してみました。

インポートされたモジュールのサイズを指定する方法はありますか。 cssはありますか？

Answer 1

FlipCard.jsのソースを見てみると、それは、このコンポーネントは、あなたのCSSクラス内側のHTML要素へのダウンパイプすることはできませんつまり、小道具などclassName受け入れるかのように表示されません：

を

render() { 
    return (
     <div 
     className={cx({ 
      'ReactFlipCard': true, 
      'ReactFlipCard--vertical': this.props.type === 'vertical', 
      'ReactFlipCard--horizontal': this.props.type !== 'vertical', 
      'ReactFlipCard--flipped': this.state.isFlipped, 
      'ReactFlipCard--enabled': !this.props.disabled 
     })} 
     .... 

：

https://github.com/mzabriskie/react-flipcard/blob/master/lib/components/FlipCard.js

また、コンポーネントの作者はflipped又はdisabledようないくつかの利用可能なpropsに基づいて、コンポーネントのルートレベルにclassName自分自身を設定するように見えます

これは、サードパーティ製のコンポーネントライブラリでは非常に一般的であることがわかりました。多くの場合、柔軟性のために設計されていないコンポーネントに機能やスタイルを振り回そうとしています。そのため、私はインスピレーションのために第三者のコンポーネントをよく調べてから、必要に応じて書き直すだけです。