來源 |?http://www.fly63.com/article/detial/1961

1、在組件中直接使用style

不需要組件從外部約會css文件，直接在組件中書寫。import react, { Component } from "react";const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //駝峰法 minHeight: "200px", boxSizing: "border-box"};class Test extends Component { constructor(props, context) { super(props); } render() { return ( 123 ); }}export default Test;注意事項：在正常的css中，設置background-color，box-sizing等屬性，在style對象div?1中的屬性中，必須轉換成駝峰法，backgroundColor，boxSizing。而沒有連字符的屬性，如margin，width等，則在style對象中不變。在正常的css中，css的值不需要用雙引好(“”)，如.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}而在react中使用style對象的方式時。值必須用雙引號包裹起來。這種方式的反應樣式，只作用于當前組件。

2、在組件中約會[name].css文件

需要在當前組件開頭使用import??css文件。import react, { Component } from "react";import TestChidren from "./TestChidren";import "@/assets/css/index.scss";class Test extends Component { constructor(props, context) { super(props); } render() { return ( 123 測試子組件的樣式 ); }}export default Test;

這種方式約會的css樣式，會作用于當前組件及其所有后代組件。

3、在組件中約會[name] .s css文件

引入反應內部已經支持了后綴為SCSS的文件，所以只需要安裝節點薩斯即可，因為有個節點薩斯SCSS文件才能在節點環境上編譯成的CSS文件。

>yarn add node-sass然后編寫scss文件//index.scss.App{ background-color: #282c34; .header{ min-height: 100vh; color: white; }}

關于如何詳細的使用sass，請查看sass官網：

這種方式約會的css樣式，同樣會作用于當前組件及其所有后代組件。

4、在組件中約會[name] .module.css文件

將css文件作為一個模塊約會，這個模塊中的所有css，只作用于電流組件。不會影響電流組件的后代組件。

import react, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.css";class Test extends Component { constructor(props, context) { super(props); } render() { return ( 321321 ); }}export default Test;

這種方式可以看做是前面第一種在組件中使用style的升級版。完全將css和組件分離開，又不會影響其他組件。

5、在組件中約會[name] .module.scss文件

某種第四種，區別是第四種約會css模塊，而這種是約會scss模塊而已。

import react, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.scss";class Test extends Component { constructor(props, context) { super(props); } render() { return ( 321321 ); }}export default Test;同樣這種方式可以看做是前面第一種在組件中使用style的升級版。

6、使用styled-components

需要先安裝>yarn add styled-components然后創建一個js文件(注意是js文件，不是css文件)//style.jsimport styled, { createGlobalStyle } from "styled-components";export const SelfLink = styled.div` height: 50px; border: 1px solid red; color: yellow;`;export const SelfButton = styled.div` height: 150px; width: 150px; color: ${props => props.color}; background-image: url(${props => props.src}); background-size: 150px 150px;`;

組件中使用styled-components樣式

import React, { Component } from "react";import { SelfLink, SelfButton } from "./style";class Test extends Component { constructor(props, context) { super(props); } render() { return ( app.js SelfButton ); }}export default Test;

這種方式是將整個的CSS樣式，和HTML節點整體合并成一個組件。引入這個組件的HTML和CSS都有了。它的好處在于可以隨時通過往組件上傳入屬性，來動態的改變樣式。對于處理變量，媒體查詢，偽類等較方便的。

這種方式的css也只對當前組件有效。

具體用法，請查看styled-components官網：https://styled-components.com/

7、使用radium

需要先安裝

>yarn add radium然后在react組件中直接約會使用import React, { Component } from "react";import Radium from 'radium';let styles = { base: { color: '#fff', ':hover': { background: '#0074d9' } }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' }};class Test extends Component { constructor(props, context) { super(props); } render() { return ( this is a primary button ); }}export default Radium(Test);對于處理變量，媒體查詢，偽類等是不方便的。使用Radium可以直接處理變量，媒體查詢，偽類等，并且可以直接使用js中的數學，連接，正則表達式，條件，函數等。具體用法請查看radium官網：https://formidable.com/open-source/radium/注意：在export之前，必須用Radium包裹。

總結

以上是生活随笔為你收集整理的style 放入css文件失效_React中使用CSS的7种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。