css - React Toolbox组件很大

我在玩React Toolbox时，我已经注意到（不是您会错过它的）这些组件渲染的非常大。这是一个例子：



我确定那是不正确的，工具栏的高度非常大，而且这些复选框也是如此。.....我缺少什么吗？这是第一次使用React Toolbox。

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

最佳答案

“有什么我想念的吗？”


不，不用担心：)

您只是看到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} />

关于css - React Toolbox组件很大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40816007/