본문 바로가기

프로그램 강좌

[react.js]style css 표현방법


style css 표현법

우선 일반적인 형태는 이런식으로 씁니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const textcolor = {
      color: '#666'
    };
    const colorname = '회색';
    return (
      <div>
        <p style={textcolor}>제가 선택한 컬러는 {colorname}입니다.</p>
      </div>
    );
  }
}

export default App;


이렇게 변수 선언 없이 태그 안에서 바로 쓸수도 있습니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const textcolor = {
      color: '#666'
    };
    const colorname = '회색';
    return (
      <div>
        <p style={textcolor}>제가 선택한 컬러는 {colorname}입니다.</p>
        <p style={{ color:'red' }}>강조컬러는 빨간색입니다.</p>
      </div>
    );
  }
}

export default App;

 


728x90