Revision history [back]

To establish a style object to associate with a React component, follow these steps:

1. Define a variable/object to hold the styles, for example:

const styles = {
  container: {
    backgroundColor: '#F5F5F5',
    padding: '10px'
  },
  text: {
    color: '#333',
    fontSize: '16px'
  }
};

1. Import the styles into your component file, for example:

import React from 'react';
import styles from './styles';

1. Apply the styles to the component by adding the style prop, for example:

function MyComponent() {
  return (
    <div style={styles.container}>
      <p style={styles.text}>Hello, world!</p>
    </div>
  );
}