javascript - 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 或 禁用:

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

我发现这在第 3 方组件库中很常见。通常情况下，我发现自己试图将功能或样式硬塞到一个并非为灵 active 而设计的组件中。因此，我经常仔细阅读 3rd 方组件以获取灵感，然后简单地重写以满足我的需求。