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如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。