react怎么寫style

react寫style的方法：1、使用內聯式；2、使用className方法；3、使用classnames動態修改樣式；4、使用【styled-components】插件寫標簽樣式。

本教程操作環境：windows7系統、React17版，該方法適用于所有品牌電腦。

react寫style的方法：

1、內聯式

import React, { Fragment } from "react"; class Style extends React.Component {   constructor(props) {     super(props);   }   render() {       const txtColor = {           color: '#F00'       }     return (      <Fragment>          <h1 style={txtColor}></h1>      </Fragment>     );   } } export default Style;

這種寫法不推薦使用,樣式多了之后,會導致代碼比較亂!

2、使用className

import React, { Fragment } from "react"; import "./../../style.css"; class Style extends React.Component {   constructor(props) {     super(props);   }   render() {     return (      <Fragment>          <h1 className="textColor"></h1>      </Fragment>     );   } } export default Style;

新建一個.css文件,將文件引進來,標簽中使用className=“textColor”,就可以使用引入.css文件中類為’textColor’的樣式了.一般的項目用這個方式就可以了.

3、使用classnames動態修改樣式

import React, { Fragment } from "react"; import classNames from 'classnames' class Style extends React.Component {   constructor(props) {     super(props);   }   render() {     return (      <Fragment>          <h1 className={classNames('textColor', {'textContent': false} ,{'textTitle': true})}></h1>      </Fragment>     );   } } export default Style;

這種動態修改樣式的方式,需要安裝插件classnames.上面的代碼中,h1標簽的類有textColor和textTitle.項目中一般也會使用.

4、使用styled-components插件寫標簽樣式

import React, { Fragment } from 'react' import styled from 'styled-components' const Title = styled.h1`   color: #f00; ` class Style extends React.Component {   constructor(props) {     super(props)   }   render() {     return (       <Fragment>         <Title>復習style</Title>       </Fragment>     )   } } export default Style

使用styled-components給標簽寫樣式,首先需要安裝該插件.上面的代碼是定義一個Title,通過styled給h1標簽設置樣式,然后在組件中使用的Title就相當于寫過樣式的h1標簽.這種方式在大項目中比較常見.

相關免費學習推薦：javascript（視頻）