css - React 工具箱组件非常庞大

Question

我正在玩React Toolbox，我注意到（不是你会错过它）组件渲染得非常大。这是一个例子：

我敢肯定那是不正确的，工具栏的高度很大，而且那些复选框……嗯……有什么我遗漏的吗？这是第一次使用 React Toolbox。

我不确定这是否与Layout组件有关？您可以在此处的文档中查看它。它继续描述它如何拥有所有这些花哨的断点，但我不知道如何实际实现和使用它们？

score 1 · Accepted Answer

“我有什么遗漏吗？”

不，没什么好担心的：）

您只是看到了react-toolbox组件的默认样式，因为它们是在包中定义的。

看看里面node_modules/react-toolbox/lib/。您sass-loader的 inwebpack.config.js编译并注入这些样式（因为node_modules未明确排除）。

当然，您可以通过在项目中定义自己的或文件来覆盖这些默认样式。.scss.css

所有组件都react-toolbox接受一个属性className。

即你可以做

styles.css（.scss如果你更喜欢，就去吧）

.myCustomInput {
    font-size: 10px;
    height: 12px;
    background-color: #ccc;
    padding: 3px 5px;
}

AddToDo.js

import { Input } from 'react-toolbox';
import styles from './styles.css'; 

...

<Input className={styles.myCustomInput} />

1 回答 1