如何在 React 中运用 CSS

html-css025

如何在 React 中运用 CSS,第1张

import React, { Component } from 'react'

import { Link } from 'react-router'

/* 导入组件样式 */

import styles from './styles'

/*根据这个例子，在render的时候，最外部的className就采用{`${styles}`}的写法，这个方括号内的style就是你自己写的样式名*/

export class Header extends Component {

render() {

return (

<header className={`${styles}`} ref="header">

<div className="container">

<div className="row">

<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">

<nav>

<Link to="/home" activeClassName="active">

Home

</Link>

<Link to="/list" activeClassName="active">

Redux

</Link>

</nav>

</div>

</div>

</div>

</header>

)

}

}

在react中设置css样式

以上是行内式的样式设置，渲染的结果是

当然还可以使用require直接引入.css文件的，但由于还是初学，并未涉及，以后补上

react中的条件语句的写法

1.三元表达式

在create-react-app脚手架工具里的表现为

npm install babel-plugin-css-modules-transform -D

根目录添加一个.babelrc的文件，写入：

{

    "plugins": ["css-modules-transform"]

}

layout.js

import CustomCss from './a.css'

<div className='CoustomCss.hahaha'>

111111

</div>

a.css

.hahaha { background-color: red }