1

I am new to react and react toolbox. React toolbox uses scss. I don't know scss yet so facing problems with customization of its components.

This is what I have:

  <AppBar fixed flat title="Webocity" className="appBar">
    <Navigation type='horizontal' className="navbar" routes={linkroutes}>
      </Navigation>
  </AppBar>

An appbar component with navigation component in it.

I tried applying css class to appbar component and it worked.

However, className on Navigation component isn't working and would like to know why. Why did it work for AppBar and not Navigation?Also, for appBar css ,background proerty was overrided but not height property. Why is that?

Also, how do I pass themes to these components? I understand that would need to be written in SCSS files. But could I get may be a very simple example for it?

The documentation shows:

import theme from './PurpleAppBar.scss';

const PurpleAppBar = (props) => (
  <AppBar {...props} theme={theme} />
);

export default PurpleAppBar;

But what is PurpleAppBar.scss and what should it look like? I believe it's a custom SCSS file?

Also, I am working on a web app so material-ui doesn't sound a good option to me.Do we have anything better to enhance UI in react web apps?

Venugopal
  • 1,888
  • 1
  • 17
  • 30
gags
  • 255
  • 2
  • 17

1 Answers1

1

React Toolbox uses CSS Modules to internally style components and we encourage you to use it as well. Each component in react toolbox implements an API of classNames that are assigned to each DOM Node depending on the state. You can see the API in the docs.

The theme property is a shape that implements that className api with a matching between final classes and the className. Say you have a CSS module

.button {
  background-color: red
}

That gets resolved in an object like { button: 'MyButton--button__1262a' }. You can give that object to the component so it will get the button className and set it up into the corresponding node. Beware the selector priority. Sometimes you'd need to boost priority and you can do it just adding a className to the root of your custom components. There are plenty of examples in the docs and you can check the example repo as well.

If you don't want to use CSS Modules you can still implement theming hardcoding the module. For example if you want to write in your css an .awesome-button class, you can pass the a theme object telling so: { button: "awesome-button" }. For more information take a look at react-css-themr.

javivelasco
  • 426
  • 3
  • 10