React component styling

Dynamic Inline Styling

• inline styling은 가장 높은 우선순위를 가진다

<label style={{color : !isValid ? 'red' : 'black' }}> ... </label>

Setting Dynamic CSS Class

(CSS 파일)

.form-control { // CSS properties... }

.form-control.invalid input { // CSS properties... }

.form-control.invalid label { // CSS properties... }

(js 파일)

<div ⭐className = {`form-control ${!isValid ? 'invalid' : ''}`}>
	<label>...</label>
    <input type="text"/>
</div>

Styled-Components

• using css selectors and classNames
  => because every element in the code is effected,
  in large projects, there can be duplicated classNames

styled-components docs

const Button = styled.button`
	font : inherit;
    // CSS properties...
`

&:focus { // CSS properties }
&:hover, &:active { // CSS properties }

=> when checking the element with F12, it has a unique class derived from styled-componets module

- can use dynamic styling via props

<FormControl invalid = {!isValid}>
	<label>...</label>
    <input type="text"/>
</FormControl>

const FormControl = styled.div`
	&input {
        background : ⭐${props => (props.invalid ? 'red' : '#ccc') };
    }
`

- using media queries

const Button = styled.button`
	width: 100%;
    
	@media (min-width: 768px) {
		width: auto;
	}

Using CSS Module

(CSS(.module) 파일)

.form-control {
	// CSS properties
}

.form-control.invalid input {
	// CSS properties
}

.form-control.invalid label {
	// CSS properties
}

(js 파일)

import styles from './CourseInput.module.css' 
// import a module.CSS file with a specific name

const CourseInput = props => {
	return(
    	<div className={`${styles['form-control'} ${!isValid && styles.invalid`}>
        	<label>...</label>
            <input type="text"/>
		</div>
    )

=> when checking the element with F12, it has a unique class derived from React module