React组件没有考虑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的小尺寸不会改变：

我也尝试过这样：

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

我发现这与第三方组件库相当普遍。通常情况下，我发现自己试图将功能或样式设计成一个没有灵活设计的组件。因此，我经常仔细阅读第三方组件的灵感，然后只需重写以满足我的需求。