React[003]样式

发表于 更新于 分类于 
1
2
3
npm i classnames -S
npm i styled-components  -S
npm install -S prop-types

src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
import { render } from 'react-dom'
import classNames from 'classnames';
import styled from 'styled-components'
import './index.css'

const Title = styled.h1`
    color:#f00
`

class App extends Component {
    render() {
        const style = { color: '#f00' }
        return (
            <div>
                <Title>元素中的样式</Title>
                <h1 > 元素中的样式 </h1>
                <ol>
                    <li style={style}>使用style内敛创建</ li>
                    <li className='has-text-red'>使用style内敛创建</ li>
                    <li className={classNames('a', { 'b': true, 'c': false })}>
                        要动态添加不同的className，就可以使用第三方的包,比如这个li标签只用a,b没有c
                    </li>
                </ol>
            </div>
        );
    }
}

render(
    <App />,
    document.querySelector('#root')
);

src/index.css

1
2
3
.has-text-red {
    color: #f00
}