Tepki bileşeni dikkate alınmıyor CSS

Question

Bu React bileşeni https://github.com/mzabriskie/react-flipcard kullanıyorum.

böyle boyutunu belirtmek için çalışıyorum: Böyle İthal

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

: Bu css dosyası kullanma

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

Ben onun büyüklüğünü değiştirdi

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

css ama yine de sayfada, Flipcard küçük bir boyutu var sn't değişikliği:

Ben de böyle çalıştı:

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

ama hiçbir etkisi ile

.

İçe aktarılan bir modülün boyutunu belirleyebileceğim herhangi bir yol var mı? css eksik var mı?

Answer 1

FlipCard.js kaynağına bir göz alarak, bu bileşeni, CSS sınıf iç HTML öğelerine aşağı boruya mümkün olmayacaktır, yani sahne olarak className kabul sanki görünmez:

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

Üstelik bileşen yazarı flipped veya disabled gibi bazı mevcut props dayalı bileşenin kök düzeyinde className kendi ayar gibi görünüyor

Bunu üçüncü taraf bileşen kitaplıkları ile oldukça yaygın buldum. Daha sık olmamakla birlikte, kendimi ayakkabı çekirdeği işlevselliğini veya stillerini esneklik için tasarlanmamış bir bileşene girmeye çalışıyorum. Bu nedenle, genellikle üçüncü taraf bileşenleri ilham almak için kullanırım, daha sonra ihtiyaçlarımı karşılamak için yeniden yazarım.