Компонент реагирования не учитывается CSS

Question

Я использую этот компонент React https://github.com/mzabriskie/react-flipcard.

Я пытаюсь указать его размер, как это:

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

Используя этот css файл:

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

импортированного как это:

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

Я изменил свой размер в css, но все же на странице Flipcard имеет небольшой размер, который делает sn't изменение:

Я также попытался так:

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

, но без эффекта.

Есть ли способ указать размер импортируемого модуля. Есть css Отсутствует?

Answer 1

Взглянув на источнике FlipCard.js, он не появляется, как будто этот компонент принимает className в качестве реквизита, то есть вы не сможете трубы вашего класса CSS вниз к внутренним элементам HTML:

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

Кроме того, автор компонента, как представляется, устанавливая свои собственные className на корневом уровне компоненты, на основе некоторых доступных props как flipped или disabled:

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 
     })} 
     .... 

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