React中的css如何使用

这篇文章主要介绍了React中的CSS如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React中的css如何使用文章都会有所收获，下面我们一起来看看吧。

一、行内样式使用

import React from 'react'class Home extends React.Component {  render() {    return (      <div>        <h4 style={{fontColor: 'green',marginTop:'5px'}}>标题</h4>      </div>) }}export default Home

二、声明样式使用

import React from 'react'class Home extends React.Component {  render() {    const title = {      fontColor: 'green',      marginTop: '5px'    }    return (      <div>        <h4 style={tilte}>标题</h4>      </div>) }}export default Home

三、外部引入

import React from 'react';import './Home.css';class Home extends React.Component {  render() {     return (      <div>        <h4 className="title">标题</h4>      </div>) }}export default Home

四、Style Component

npm install --save styled-components

import React from 'react';class Home extends React.Component {  const Title = styled.h4`    margin-top: 5px;    font-color: green;  `;  render() {    return (      <div>        <Title>标题</Title>      </div>) }}export default Home

六、Radium

import React from "react";import Radium from 'radium';let styles = {  title: {    color: 'green',    marginTop: '5px'    ':hover': {      fontColor: '16px'    }  },  info: {    color: '#666'  }};class Home extends Component {   render() {    return (     <div>      <h4 style={[ styles.title, styles.info ]}>        标题      </h4>     </div>    );  }}export default Radium(Home);

关于“React中的css如何使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“React中的css如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。