Inline

class Inline extends React.Component {
  render() {
    return (
      <>
        <h1 style={{color: "red"}}>Hello</h1>
        <p>This is Inline</p>
      </>
    );
  }
}

• React에서 CSS 속성은 camelCase로 작성한다.
  ex) backgroundColor

Javascript Object

class Javascript extends React.Component {
  render() {
    const myStyle = {
      color: "black",
      backgroundColor: "lightblue",
      padding: "10px",
      fontFamily: "Arial"
    }
    return (
      <>
        <h1 style={myStyle}>Hello</h1>
        <p>This is Javascript Object</p>
      </>
    );
  }
}

CSS Stylesheet

App.css

body {
  color: "black",
  margin: "40px"
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class Stylesheet extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello This is App.css</h1>
      <p>little style.</p>
      </div>
    );
   
  }
}

ReactDOM.render(<Stylesheet />, document.getElementById('root'));

CSS Modules

mystyle.module.css

.blue {
  color: 'blue',
  text-align: 'center'
}

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class Module extends React.Component {
  render() {
    return <h1 className={styles.blue}>Hello Module</h1>;
  }
}

export default Module;