3.组件中的样式

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.行内样式

行内样式中共有两个大括号
大括号1：表示JSX语法的大括号
大括号2：表示JSON的大括号

<h1 style={{color:"red"}}>你好</h1>

或

const helloStyle={
    color:"red"
}
<h1 style={helloStyle}>你好</h1>

2.类样式
2.1.新建文件src/index.css

.hasRed{
    color:"red"
}

2.2.安装依赖用于导入css样式

cnpm i -D classnames

2.3.在当前jsx组件中引用classnames

在React中使用className代替class

import classnames from 'classnames';
import './index.css';
<h1 className="hasRed">你好</h1>
{/*以下方式为动态引入*/}
<h1 className={classnames("hasRed")}>你好</h1>

扩展classnames用法

<h1 className={classnames("hasRed",{a:true,b:false})}></h1>
//在页面中呈现结果如下
<h1 class="hasRed a"></h1>
//在页面中并没有把class=b呈现出来 是因为b为false 此方式可以用于动态改变class

2.4.styled-components使用(使用styled创建组件并直接添加样式)

cnpm i -D styled-components

import styled from 'styled-components';

const Title=styled.h1`color:red`;

<Title>嘿</Title>