这篇文章主要介绍了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如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云搜网行业资讯频道。
