Inline Style CSS

html Inline Style과 마찬가지로 Html 코드상에 Style을 정의하는 방식입니다.

단, Style을 정의할떄 Object형태로 정의해야 합니다.

 

작성 예제는 아래와 같습니다.

const title = {
    color: '#000',
    fontWeight: '700',
    fontSize: '1.5rem',
    marginBottom: '40px',
    marginTop: '20px',
    display: 'inline-flex',
    width: '100%',
    marginLeft: '25px',
  }

const App = () => {
	return (
		<div className="App">
			<div style={title}/>
		</div>
	);
}
export default App;

 

 

장점

   1) 한 소스에서 Html과 Style 정의가 가능하기 때문에 소스하나만 유지보수 하면 된다.

 

단점

   1) 유지보수 어려움

       - 각 컴포넌트에 정의된 Html을 찾아가서 수정해야 함

   2) 공통 Style 적용하기 어려움

       - Inline Style이 최우선 적용되기 때문에 공통으로 적용하기 어렵다.

   3) CSS Style String을 Object로 변환 필요

       - Zeplin과 같은 디자인 툴에서 만들어지는 CSS String을 Object로 변환해야한다.

       - 물론 아래와 같은 Opens Library를 사용하면 되지만 일일히 적용해줘야하니 불편한건 동일하다.

       - https://www.npmjs.com/package/style-to-object

style-to-object

 

단점을 보완하기 위해서, Object 파일을 구조화 하거나 파일로 분리해서 사용할 수도 있지만,

결론은 많은 유지보수 비용 때문에 역시 사용하지 않는 것이 좋습니다.

 

./style/samplePageStyle.js

const header = {
  arrowBack: {
    left: '30px',
    height: '30px',
  },
  title: {
    color: '#000',
    fontWeight: '700',
    fontSize: '1.5rem',
    marginBottom: '40px',
    marginTop: '20px',
    display: 'inline-flex',
    width: '100%',
    marginLeft: '25px',
  },
  roundButton: {
    height: '40px',
    color: '#000',
    padding: '10px',
    paddingLeft: '20px',
    paddingRight: '20px',
    selected: {
      color: '#fff',
      paddingLeft: '30px',
      paddingRight: '30px',
      borderRadius: '2.2rem',
      backgroundColor: '#0064de',
    },
  },
};
const content = {
  bg: { backgroundColor: '#fff', borderRadius: '1rem', minHeight: '70px', marginTop: '20px' },
};

 

SamplePage.jsx

import { header, content } from './style/samplePageStyle';

const SamplePage= () => {
  return (
    <>
      <div style={header.title}>
        <button style={header.arrowBack} onClick={() => {}} />
        <label style={{ marginLeft: '25px' }}>제목</label>
      </div>
      <ul>
        <li>
          <button style={header.roundButton}>버튼1</button>
          <button style={{ ...header.roundButton, ...header.roundButton.selected }}>버튼2</button>
        </li>
      </ul>
      <div style={content.bg}></div>
    </>
  );
};
export default SamplePage;