ReactJS Tutorial - Styling and CSS Basics

Styling React Components

---

1. CSS stylesheets
2. Inline styling
3. CSS Modules
4. CSS in JS libraries (styled-components)

1. CSS stylesheets

• regular css stylesheet

// App.js
import React from 'react';
import Stylesheet from './components/Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet /> 
    </div>
  );
}
 
export default App; 

// Stylesheet.js
import React from 'react'
import './myStyle.css'

function Stylesheet() {
  return (
    <div>
      <h1>Stylesheets</h1>
    </div>
  )
}

export default Stylesheet

/* myStyle.css */
.primary {
  color: orange;
}

• conditionally apply a class based on props or state of the component

// App.js
import React from 'react';
import Stylesheet from './components/Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet primary={true} /> 
    </div>
  );
}
 
export default App; 

// Stylesheet.js
import React from 'react'
import './myStyle.css'

function Stylesheet(props) {
  let className = props.primary ? 'primary' : ''
  return (
    <div>
      <h1 className={className}>Stylesheets</h1>
    </div>
  )
}

export default Stylesheet

/* myStyle.css */
.primary {
  color: orange;
}

• multiple classes

// App.js
import React from 'react';
import Stylesheet from './components/Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet primary={true} /> 
    </div>
  );
}
 
export default App; 

// Stylesheet.js
import React from 'react'
import './myStyle.css'

function Stylesheet(props) {
  let className = props.primary ? 'primary' : ''
  return (
    <div>
      <h1 className={`${className} font-xl`}>Stylesheets</h1>
    </div>
  )
}

export default Stylesheet

/* myStyle.css */
.primary {
  color: orange;
}

.font-xl {
  font-size: 72px;
}

2. Inline styling

In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the camelcase version of the css property name and the value is usually a string.

// App.js
import React from 'react';
import Inline from './components/Inline';

function App() {
  return (
    <div className="App">
      <Inline />
    </div>
  );
}
 
export default App; 

// Inline.js
import React from 'react'

const heading = {
  fontSize: '72px',
  color:  'blue'
}

function Inline() {
  return (
    <div>
      <h1 style={heading}>Inline</h1>
    </div>
  )
}

export default Inline

3. CSS Modules

import React from 'react';
import './appStyles.css'
import styles from './appStyles.module.css'

function App() { 
  return (
    <div className="App">
      <h1 className="error">Error</h1>
      <h1 className={styles.success}>Success</h1>
    </div>
  );
}
 
export default App; 

/* appStyles.css */
.error {
  color: red
}

/* appStyles.module.css */
.success {
  color: green
}

One advantage of using css modules is that the classes are locally scoped by default.

일반 css에서는 하위 컴포넌트에 같은 style property가 적용되어 여러 컴포넌트에서 사용 시 충돌이 일어날 수 있지만, styles로 import한 css module은 하위 컴포넌트에 적용되지 않고 해당 컴포넌트로 범위가 한정된다.

---

🔗 ReactJS Tutorial - 20 - Styling and CSS Basics