Get startedPropertiesEventsStylingDireflow and stylingScoped vs. non-scopedStyling alternativesPluginsConfigurationAdditionalGuides & tipsContributingChangelog

Direflow and styling

In order to use styles in your components, use the <Styled> component, or the withStyles() HOC.
First import your css-file like this:

import styles from './App.css';

There are two cases in how to style a component:

  • A component where top-level is an html element, e.g. a <div> or a <span> etc.
  • A component where top-level is another React Component, a fragment, a function call that returns a component, etc.

In the first case, we wrap the component in the <Styled> component, and pass down the imported style as props:

import React, { FC } from 'react';
import { Styled } from 'direflow-component';
import styles from './App.css';
const App: FC = () => {
return (
<Styled styles={styles}>
<div className='app'>
<div className='header-title'>My React Web Component</div>
</div>
</Styled>
);
};
export default App;

Any children of the <Styled> component can now reference the styles.

In the second case, we use the the withStyles() HOC.

import React, { FC } from 'react';
import { withStyles } from 'direflow-component';
import styles from './App.css';
const App: FC = () => {
return (
<>
<CoolReactComponent />
<AwesomeReactComponent />
</>
);
};
export default withStyles(styles)(App);

The main difference between the <Styled> component and the withStyles() HOC, is that the <Styled> component will inject all styles just below the html element that it wraps.

The withStyles() will add an extra <div> element around the content that it wraps, and inject all styles into this.

Both the <Styled> component and the withStyles() HOC can take a list of styles as well.

import styles from './App.css';
import otherStyles from './OtherStyles.css';
<Styled styles={[styles, otherStyles]}>
...
import styles from './App.css';
import otherStyles from './OtherStyles.css';
...
export default withStyles([styles, otherStyles])(App);

Scoped vs. non-scoped

As a default, the <Styled> component using scoped styles to avoid global CSS name collisions.
If needed, this behavior can be disabled:

<Styled styles={styles} scoped={false}>
...

This may be convenient if you're importing third-party stylesheets, e.g. bootstrap.

Styling alternatives

Sass / scss

If you want to use sass instead of regular css, you can simply rename your files to .scss instead of css.
Everything else will be the same as mentioned above.

Styled Components

Direflow offers native support for using styled-components.
You only need to do two things in order to get started:

Add styled-component:

npm install styled-components

Then add styled-components to the lists of plugins in direflow-config.js.

plugins: [
{
name: 'styled-components'
},
]

See more under plugins



→ Plugins