Built-In CSS Support

Oreact allows you to `import` CSS files as simply you do JS files.

Oreact extends the css import support with the help of CSS loaders. There are so many ways to add styles to your website; Oreact supports almost every possible option.

Adding a Global Stylesheet

Oreact has assigned a app/styles directory for global stylesheets you want to add. To add a stylesheet to your application, Add CSS file and import it into index.css file.

Example

Create a new stylesheet as shown below app/styles/app.css

html {
  background-color: blue;
}
body {
  color: black;
}

Append newly created css file into a index.css app/styles/index.css

...
@import 'app.css';

Importing CSS anywhere

If you would like to embed a stylesheet, you need to just import stylesheet as you do for JS file.

Example

Consider a Button component and it's css file component/Button.css with following content:

.primary{
    color: blue
}

Now importing and using CSS file within a Button component:

import from './Button.css'

export function Button() {
  return (
    <button type="button"
      // Note how the "primary" class is accessed as a property on the imported
      // `styles` object.
      className={'primary'}>Primary Button</button>
  )
}

Adding Component-Level CSS

Oreact supports CSS Modules using the [name].module.css file naming convention.

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

This behavior makes CSS Modules the ideal way to include component-level CSS. CSS Module files can be imported anywhere in your application.

Example

Consider a reusable Button component in the app/components/ folder:

First, create components/Button.module.css with the following content:

.primary{
    color: blue
}

Then, create components/Button.js, importing and using the above CSS file:

import styles from './Button.module.css'

export function Button() {
  return (
    <button type="button"
      // Note how the "primary" class is accessed as a property on the imported
      // `styles` object.
      className={styles.primary}>Primary Button</button>
  )
}

Note: CSS Modules are an optional feature and are only enabled for files with the .module.css extension.

CSS-in-JS

Inline CSS

Oreact allows you to write CSS inline within a JSX. for example see the following content.

export default () =>{
    return <p style={{ color: 'blue' }}>Hello World</p>;
}

SCSS/SASS Support

Oreact allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

TailwindCSS Support

Tailwind provides a pretty comprehensive set of helper classes out of the box.

We are using JSS advantages using Material-UI but we can't leave helper classes for fast development, ease of use, globally access etc.

Tailwind helps to generate helper classes as per our need. It is a very customizable, you can find config files added in our project root directory tailwind.js and tailwind.base.css.