Example object inside:
function MyComponent() {
  return (
    <div style={{color: 'green', fontSize: '20px', backgroundColor: 'yellow',}}> 
      Styled content
    </div>
  );
}

Example object outside:
const styles = {
  color: 'blue',
  fontSize: 16, // px assumed
  fontWeight: 'bold',
};

function MyComponent() {
  return <div style={styles}>Styled content</div>;
} 

Another object outside: 
function MyComponent() {
  const styles = {
    color: 'green',
    fontSize: '2rem', // using different length unit
    backgroundColor: 'yellow',
  };

  return <div style={styles}>Styled content</div>;
}

Inside Style Sheet:
/* styles.css */
.myClass {
  color: blue;
  font-size: 16px;
  font-weight: bold;
}

Inside JS file:
import React from 'react';
import './styles.css';

function MyComponent() {
  return <div className="myClass">Styled content</div>;
}

import React, { useState } from 'react';
import './styles.css'; 

function ExampleComponent() {
  const [isDisplayed, setIsDisplayed] = useState(true);

  const handleButtonClick = () => {
    setIsDisplayed(!isDisplayed);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Toggle Display</button> 
      <div style={{ display: isDisplayed ? 'block' : 'none' }}>
        {/* Content */}
      </div>
    </div>
  );
}

export default ExampleComponent;