반응 스타일을 작성하는 방법-JS 튜토리얼-php.cn

반응 스타일을 작성하는 방법

coldplay.xixi

풀어 주다： 2020-12-22 16:09:53

원래의

12203명이 탐색했습니다.

React에서 스타일을 작성하는 방법: 1. 인라인 스타일을 사용합니다. 2. className 메서드를 사용합니다. 3. 클래스 이름을 사용하여 스타일을 동적으로 수정합니다. 4. 레이블 스타일을 작성하려면 [styled-comComponents] 플러그인을 사용합니다.

반응 스타일을 작성하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

React에서 스타일 작성 방법:

1. 인라인

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

로그인 후 복사

스타일이 너무 많으면 코드가 지저분해집니다.

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"를 사용하고, 가져온 파일에서 'textColor' 클래스와 함께 스타일을 사용할 수 있습니다. .css 파일 예. 이 방법은 일반 프로젝트에 사용할 수 있습니다.

.css文件,将文件引进来,标签中使用className=“textColor”,就可以使用引入.css文件中类为’textColor’的样式了.一般的项目用这个方式就可以了.

3、使用classnames动态修改样式

import React, { Fragment } from "react";
import classNames from &#39;classnames&#39;
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 &#39;react&#39;
import styled from &#39;styled-components&#39;
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-components3. 클래스 이름을 사용하여 스타일을 동적으로 수정합니다.

rrreee
스타일을 동적으로 수정하려면 위 코드에서 플러그인 클래스 이름을 설치해야 합니다. h1 태그의 클래스에는 textColor 및 textTitle이 있습니다. 4. 스타일 구성 요소 플러그인을 사용하여 라벨 스타일을 작성하세요.rrreee스타일 구성 요소를 사용하세요. > 라벨 스타일을 작성하려면 먼저 플러그인을 설치해야 합니다. 위의 코드는 Title을 정의하고 styled를 통해 h1 태그의 스타일을 설정한 다음 구성 요소에 사용되는 Title이 스타일이 지정된 h1과 동일하도록 하는 것입니다. 이 방법은 대규모 프로젝트에서 더 일반적입니다.
javascript

🎜🎜(동영상)🎜🎜🎜

위 내용은 반응 스타일을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!