Working With Inline Styles In React JS

Inline Styles In React JS: Styling in React is an important aspect of developing a visually appealing and user-friendly interface. In addition to using stylesheets, React also offers the ability to add inline styles to components.

Inline styles can be useful when you need to apply styles dynamically based on props or state, or when you need to add styles to a specific component without affecting other components. In this blog post, we’ll explore how to work with inline styles in React.

Syntax of Inline Styles in React

To add inline styles to a React component, you can use the style attribute. The style attribute takes an object containing key-value pairs of CSS properties and their values. Here’s an example of how to add inline styles to a component:

import React from 'react';

function Button(props) {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '0.5rem 1rem',
    borderRadius: '5px',
    cursor: 'pointer'
  };

  return (
    <button style={buttonStyle}>
      {props.label}
    </button>
  );
}

export default Button;

In this example, we’ve defined a buttonStyle object containing the CSS properties we want to apply to the button. We’ve then passed this object to the style attribute of the button component. Note that the property names are in camelCase instead of kebab-case as you would normally use in CSS.

Applying Styles Dynamically

One of the benefits of using inline styles in React is that you can apply styles dynamically based on props or state. For example, you might want to change the background color of a button based on whether it’s disabled or not. Here’s an example of how to apply styles dynamically in a React component:

import React, { useState } from 'react';

function Button() {
  const [disabled, setDisabled] = useState(false);

  const buttonStyle = {
    backgroundColor: disabled ? 'gray' : 'blue',
    color: 'white',
    padding: '0.5rem 1rem',
    borderRadius: '5px',
    cursor: disabled ? 'not-allowed' : 'pointer'
  };

  return (
    <button style={buttonStyle} onClick={() => setDisabled(true)} disabled={disabled}>
      {disabled ? 'Button disabled' : 'Click me'}
    </button>
  );
}

export default Button;

In this example, we’ve defined a disabled state variable using the useState hook. We’ve then used this variable to conditionally apply styles to the button. If the button is disabled, we change the background color to gray and set the cursor to ‘not-allowed’.

If the button is not disabled, we apply the normal blue styles and set the cursor to ‘pointer’. We’ve also used the disabled prop to disable the button when it’s clicked.

Conclusion

Inline styles in React can be a useful tool for adding styles to components dynamically or when you need to apply styles to a specific component without affecting other components. By using the style attribute and passing in an object containing CSS properties, you can create visually appealing and functional user interfaces.