React中的css使用方式

React 應(yīng)用較為廣泛，那么 CSS 在 React 中如何使用呢？

一、行內(nèi)樣式使用

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

二、聲明樣式使用

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

三、外部引入

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

四、Style Component

npm install --save styled-components

import React from 'react';
class Home extends React.Component {
  const Title = styled.h3`
    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>
      <h3 style={[ styles.title, styles.info ]}>
        標題
      </h3>
     </div>
    );
  }
}
export default Radium(Home); 

以上就是小編為您帶來的關(guān)于 React中的css使用方式 的全部內(nèi)容。