How to Set Default Style to a React Component

Jul 8, 2020 • 6 Minute Read

Introduction

React offers various methods to style components. In some cases, you might want to add additional styles to an external component or assign minimal styles to a JSX element within a component, for example. It becomes important to use a component-based styling approach instead of the conventional class-based CSS styling.

In this guide, you'll learn how to set the default styles to your React components.

CSS in JS

Consider a simple React component that renders h1 with some text in blue color.

      <h1 style={{color:'blue'}}>Inline styling in React</h1>

JSX elements in React are essential components in themselves and by default have access to a style prop. This is used for inline styling as shown above. The two pairs of curly braces are a part of the syntax that indicates that the style prop must be assigned an object containing key-value pairs. Thus the style prop can be passed to any component from its parent component. Following this approach, the same styles can be set as the default style by passing an object containing the CSS properties and their values as key-value pairs inside the object.

Declare the same style used above in h1 at the top of the component inside an object called headingStyle.

      const headingStyle={
  color:'blue'
}
    

Note: CSS properties separated by hyphen ( - ) are camel cased in JSX.

Pass this object inside the style prop.

      <h1 style={headingStyle}>CSS in JSX React</h1>

This is the general approach for setting default styles in React. The double pair of curly braces is reduced to a single one as an object itself is being assigned to the style prop. This concept of styling React components with an inline styling approach is also referred to as CSS in JS as you are directly using CSS properties in your JSX template.

Setting Default Styles to a React Component

Create a simple React component that renders an empty div.

      const MyDivComponent=()=>{
  return(
    <>
    <div/>
    </>
  )
}
    

Now create a style object divStyles containing some CSS rules to style the div.

      const divStyles={
  backgroundColor: 'teal',
  padding: 10,
  marginLeft: 100,
  height: 400,
  width:400
}
    

divStyles contains simple CSS rules to give a teal background color to the div along with 400x400px dimensions, a 100px margin from the left, and 10px of padding.

Pass it down as props to the MyDivComponent and render it on the DOM.

      function App() {
  return (
    <>
    <MyDivComponent style={divStyles}/>
    </>
  );
}
    

This renders a div with the desired styles from divStyles. Similarly, all CSS rules can be put together as a JavaScript object and then passed on to the required component as props.

One style object can be used to style different components, or rather different JSX elements within a component. It acts as the CSS stylesheet for that component, and using the default style prop, some CSS properties from that object can be assigned to these elements. This is very similar to the way a component's stylesheet targets different JSX elements using classes.

Add a few more properties to the divStyles object.

      const divStyles={
  backgroundColor: 'teal',
  color:'white',
  padding: 10,
  marginLeft: 100,
  height: 400,
  width:400
}
    

Now allocate separate styles from this object as inline styles to JSX elements.

      const MyDivComponent=({style})=>{
  console.log(style);
  return(
    <>
    <div style={{'backgroundColor':style.backgroundColor}}>
      <h2 style={{'color':style.color}}>Default styles in a React component</h2>
    </div>
    </>
  )
}
    

Now the component renders with an h2 with a background color of teal and text color of white.

You can also create a separate style object and set it as the default style for some other component, analogous to a global stylesheet. Create the following styles object as an exportable object.

      export const headerStyles={
  textTransform: 'Uppercase',
  fontSize: 32,
  fontWeight:'bold',
  color:'magenta'
}
    

Now headerStyles can be used in any component. Create a separate component that renders a simple heading with these styles.

      import React from 'react';
import {headerStyles} from './App'
const Header=()=>{
    return(
            <> <h1 style={headerStyles}>This is header component</h1> </>
    )

}

export default Header;
    

Render this component inside your root component.

      function App() {
  return (
    <>
    <Header/>
    </>
  );
}
    

This way, you can create any number of style objects and either pass them down as props to a component or globally export them so that any component can use them.

Pros and Cons of CSS in JS

Let's look at the advantages and disadvantages of this approach so you can understand when and where to use default styles for your React components.

Pros

Styles are described in a declarative manner and are both readable and maintainable.
There are fewer chances of conflicting CSS styles or the need to manually override them.
It iseusable within the component and, in some cases, outside the parent component.
It uses Nodejs to compile at runtime, offering high performance.
It eliminates the use of CSS stylesheets and large, complex CSS modules.

Cons

The concept of using CSS in JS is fairly young and not entirely accepted by the developer community. Hence, other developers working on your code might find it difficult to change or modify these styles.
It offers less modularity at the document level.
It mostly requires dependencies for compilation, such as jss, jss-preset-default, or jss-cli.
For more customized control, you may have to use libraries with a steeper learning curve.

Conclusion

Even though CSS in JS is not widely accepted, using default styles for a React component can sometimes help you avoid messy situations. It also comes in handy when you have to style only a couple of JSX elements or have to create a reusable component with fixed styles. However, due to the well-known drawbacks of inline styling, React apps should only use this approach in combination with the traditional class-based styling approach to style components in order to avoid inconsistency and confusion.