React 工具箱组件非常庞大

Question

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

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

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

Answer 1

“我有什么遗漏的吗？”

不，不用担心:)

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

看看node_modules/react-toolbox/lib/的内部。 webpack.config.js 中的 sass-loader 编译并注入这些样式（因为未明确排除 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} />