[React] 인라인 스타일

component 에 디자인을 입히는 방법 중 하나로, 인라인 스타일을 사용할 수 있다.

const style = {
    속성: '값',
};

function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button style={style} onClick={onClick}>{children}</button>
}

export default Button;

 

이처럼 객체형태로 속성을 나타낸 후 적용하는 방식을 사용한다.

 

css 에서 대시기호(-)가 들어간 속성명은 다음처럼 카멜케이스로 작성해주어야 한다.

ex ) background-color -> backgroundColor

 

const style = {
    backgroundColor: 'pink',
};

function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button style={style} onClick={onClick}>{children}</button>
}

export default Button;

---

[스타일 prop 에 따라서 적용하기]

 

다음의 스타일을 정리하면,

 

const style = {
    padding: '14px 27px',
    border: 'solid 1px #7090ff',
    outline: 'none',
    color: '#7090ff',
    cursor: 'pointer',
    backgroundColor: 'rgba(0, 89, 255, 0.2)',
    borderRadius: '30px',
    fontSize: '17px',
};

function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button style={style} onClick={onClick}>{children}</button>
}

export default Button;

const baseButtonStyle = {
    padding: '14px 27px',
    borderRadius: '30px',
    outline: 'none',
    cursor: 'pointer',
    fontSize: '17px',
};

const blueButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: 'rgba(0, 89, 255, 0.2)',
    border: 'solid 1px #7090ff',
    color: '#7090ff'
}

const redButtonStyle = {
    ...baseButtonStyle,
    backgroundColor: 'rgba(255, 78, 78, 0.2)',
    border: 'solid 1px #ff4664',
    color: '#ff4664',
}

function Button({ children, onClick, color }) { // Button 태그 안, text prop 을 보여주는 함수
    const style = color === 'red' ? redButtonStyle : blueButtonStyle ;
    return <button style={style} onClick={onClick}>{children}</button>
}

export default Button;

이처럼 공통되는 디자인은 baseButtonStyle 객체에 정리하고 파란색, 빨간색으로 스타일을 나누어서 정리하고 Button 함수에 color prop 을 추가해서 색깔별로 적용할 수 있도록 함.

 

다음과 같이 color 를 설정하면,

            <div>
                <Button color="blue" onClick={handleRollClick}>던지기</Button>
                <Button color="red" onClick={handleClearClick}>처음부터</Button>
            </div>

color prop 값에 따라 색이 설정 된 모습을 확인할 수 있다.