组件样式

未匹配的标注

直接写在 jsx

import React, {Component} from 'react';

class App extends Component {
  render() {

    const obj = {
      width: '100px',
      height: '100px',
      backgroundColor: 'red'
    }
    return (
      <div>
        <div style={obj}>12</div>
        <div style={{fontSize: '20px'}}>abc</div>
      </div>
    );
  }
}

export default App;

导入外部 css

  • app.jsx: 定义类名的时候, 要使用 className 来定义
import React, {Component} from 'react';
import '../css/app.css'

class App extends Component {
  render() {
    return (
      <div>
        <div className='box'>12</div>
      </div>
    );
  }
}

export default App;
  • app.css
.box {
    font-size: '30px';
    color: 'red';
}

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
讨论数量: 0
发起讨论 只看当前版本


暂无话题~