react js-tutorial

React Styling

Inline styles of DOM elements are frequently added to the style=”property:value” attribute of the target element in frontend projects, which hardly ever call for the use of a single-page app. When it comes to style inline, though, things are very different in React. With the help of a practical example of creating a user profile card component, this post focuses on just how to accomplish so.

Styling Components in React

You may already be aware of the regular way of styling React components using the className attribute coupled with an external stylesheet as follows:

import React from "react"
import './style.css'

function myComponent(){
      return(

           return <p className="paragraph-text">ClassName Styled Text</p>
     )
}

.paragraph-text{
   font-weight: bold;
   color: beige;
}


Inline Styles

Achieving the same results with inline styles works quite differently. To use inline styles in React, use the style attribute, which accepts a Javascript object with camelCased properties. Example:

function MyComponent(){
return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>
}

Notice that the value of padding does not have a unit as React appends a ‘px’ suffix to some numeric inline style properties. In cases where you need to use other units, such as ’em’ or ‘rem’, specify the unit with the value explicitly as a string. Applying that to the padding property should result in padding: ‘1.5em’. In addition, these styles are not vendor-prefixed automatically, so you have to add vendor prefixes manually.

Improving Readability

The readability of MyComponent reduces dramatically if styles become a lot and everything gets clunky. Since styles are mere objects, they can be extracted out of the component as shown below.

const myComponentStyle = {
   color: 'blue',
   lineHeight: 10,
   padding: '1.5em',
}
function MyComponent(){
     return <div style={myComponentStyle}> Inline Styled Component</div>
}

const cardStyles = {
  container: {
    display: "flex",
    height: 100,
    width: 400,
    boxShadow: "0 0 3px 2px #cec7c759",
    alignItems: "center",
    padding: 20,
    borderRadius: 20,
  },
  profilePicture: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "orange",
    color: "white",
    height: 20,
    width: 20,
    borderRadius: "50%",
    padding: 10,
    fontWeight: "bold",
  },
  bio: {
    marginLeft: 10,
  },
  userName: {
    fontWeight: "bold",
  },
};
function userCardComponent(){
         <div style={cardStyles.container}>
        <span style={cardStyles.profilePicture}>D</span>
        <div style={cardStyles.bio}>
          <p style={cardStyles.userName}>Desmond Nyamador</p>
          <p>I just learned an easy way to style React Components</p>
        </div>
      </div>
}

Rule of Thumb

The official React documentation frowns upon the use of inline styling as a primary means of styling projects and recommends the use of the className attribute instead.

Note: Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. style is most often used in React apps to add dynamically computed styles at render time.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.