반응에서 스타일 충돌을 해결하는 방법

반응에서 스타일 충돌을 해결하는 방법: 먼저 해당 코드 파일을 연 다음 클래스 이름 앞에 모듈 이름을 추가합니다. 예를 들어 전체 구성 요소 스타일 시트의 CSS 클래스 이름 앞에 구성 요소 이름 LoveVideo를 추가합니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1 버전, thinkpad t480 컴퓨터.

추천: "기본 JavaScript 튜토리얼"

Reacting style conflicts

React 개발에는 주의가 필요한 것들이 많습니다. 즉, 밟아야 할 함정이 많습니다. 여기서 공유해 보겠습니다. 제가 직면한 작은 함정은 주목할 만한 문제입니다. 먼저 예를 살펴보세요.

TestAComponent라는 두 가지 구성 요소가 있고 TestA 구성 요소에는 다른 하나가 있습니다. , 배경을 작성했습니다. 버튼은 파란색입니다. TestB에서는 배경이 빨간색인 버튼을 작성했습니다.

TestAComponent 컴포넌트 A:

class TestAComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为蓝色</button>
      </div>
    );
  }
}

TestA css, 배경이 파란색으로 설정됨:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

TestB 컴포넌트 B:

class TestBComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为红色</button>
      </div>
    );
  }
}

TestB css, 배경이 빨간색으로 설정됨:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: red;
  border-radius: 10px;
}

코드 작성 후 npm 시작 , 이 브라우저에 표시되는 효과는 다음과 같습니다.

분명히 두 버튼의 배경색이 다른데 실제 표시는 왜 이런가요? 여기서는 스타일 설정을 분석합니다. 레이블에 설정한 클래스 이름은 많은 프런트엔드 초보자가 사용하는 일반적인 명명 방법입니다. 그러나 서로 다른 구성 요소의 레이블 클래스 이름을 동일한 이름으로 설정하면 됩니다. 스타일 충돌을 일으킵니다.

이 문제에 대한 해결 방법:

클래스 이름 앞에 모듈 이름을 추가합니다. 예를 들어 이 구성 요소가 LoveVideo인 경우 전체 구성 요소 스타일 시트의 CSS 클래스 이름 앞에 구성 요소 이름 LoveVideo를 추가합니다.

<div>
    <button className="LoveVideobox">TestA 背景为蓝色</button>  
</div>
.LoveVideobox{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

수정 후 , 페이지를 새로 고치면 스타일 충돌 문제가 매우 잘 해결된다는 것을 알게 될 것입니다:

동일한 이름으로 인한 충돌 외에도 일부 전역 스타일이 설정되는 상황도 있습니다. as:

html{
  background-color: #fff;
  font-size: 14px;
}
*{
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size: 14px;
}

이러한 전역 스타일 또한 설정할 수 없다는 점을 기억하세요. 단일 페이지 애플리케이션을 만들기 위해 반응을 사용하면 페이지가 하나만 있기 때문입니다. 전역 스타일이 설정되면 전체 페이지가 이 스타일을 로드합니다.

요약

1. 단일 구성 요소의 클래스 이름에 구성 요소 이름 접두사를 추가합니다. 예를 들어 구성 요소 이름이 LoveVideo인 경우 모든 스타일 이름에 이 접두사를 추가합니다.

2. html｛｝ 및 *｛｝ 스타일

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