0

I'm playing around with React Toolbox and I've noticed (not that you'll miss it) that the components are rendering really big. Here's an example:

enter image description here

I'm sure that that can't be correct, that toolbar's height is pretty big and those checkboxes.. well.. Is there something that I'm missing? This is the first time using React Toolbox.

I'm not sure if this might have something to do with the Layout component? You can check it out in the documentation here. It goes on to describe how it has all these fancy breakpoints, but I have no idea how to actually implement and work with them?

Venugopal
  • 1,888
  • 1
  • 17
  • 30
  • @Solo You can pull the repo if you want? https://github.com/Tiwaz89/react-mobx-todo everything is up to date as it is on my machine right now. Just need to npm install and npm start. –  Nov 26 '16 at 07:32
  • are you sure you are not viewing this with your browser **zoomed-in** to something like 150%? ;) – yadhu Nov 26 '16 at 07:34
  • @free-soul Just checked, and no ;) Hey you never know! –  Nov 26 '16 at 07:37
  • I was about to write my answer [**Ctrl** + **-**] :D – yadhu Nov 26 '16 at 07:38

1 Answers1

1

"Is there something that I'm missing?"

No, nothing to worry :)

You're just seeing the default styles of the react-toolbox components as they are defined in the package.

Take a look inside node_modules/react-toolbox/lib/. Your sass-loader in webpack.config.js compiles and injects those styles (because node_modules is not excluded explicitly).

But of course you can OVERRIDE these default styles by defining your own .scss or .css files in your project.

All component's in react-toolbox accepts a property className.

ie you can do

styles.css (go with .scss if you like that more)

.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} />
yadhu
  • 15,423
  • 7
  • 32
  • 49
  • While you're correct in saying that you can overwrite this, I'm still wondering if that's what the authors intended. If you look at their repo react-toolbox-example (https://github.com/react-toolbox/react-toolbox-example) you'll see that the components in the project doesn't look as big and going through the code there's nothing that actually affects the size of the components. –  Nov 26 '16 at 15:44