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(&#39;textColor&#39;, {&#39;textContent&#39;: false} ,{&#39;textTitle&#39;: 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#（影片）

以上是react怎麼寫style的詳細內容。更多資訊請關注PHP中文網其他相關文章！