React Toolbox组件非常庞大

Question

我正在玩React Toolbox并且我注意到（不是你会错过它）组件渲染真的很大。这是一个例子：

我确信这不是正确的，工具栏的高度非常大，那些复选框......好吧..有什么我不知道的吗？这是第一次使用React Toolbox。

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

Answer 1

  

＆＃34;我有什么遗失的东西吗？＆＃34;

不，不用担心：）

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

查看node_modules/react-toolbox/lib/内部。您sass-loader中的webpack.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} />