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如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。