CSS 모듈이란 무엇입니까? 함께 알아봅시다!

올해 4월 한 기업과 인터뷰를 했는데요.

기술면접에서 CSS 모듈을 이해했느냐는 질문을 받았는데,

그는 계속해서 당신의 일상적인 발전에 대해 질문했습니다. ? 컴포넌트와 요소에 클래스 이름을 지정할 때 어떻게 해야 합니까?
자신이 작성한 클래스 이름이 다른 동료가 작성한 클래스 이름과 충돌하지 않도록 요소와 구성 요소에 특정 접두사를 추가한다고 말했습니다.

그럼 그만뒀고, React의 원리에 대해 많이 물어보고 면접에 합격했어요.

오늘은 CSS 모듈이 무엇인지 더 명확하게 설명할 것입니다.

[추천 튜토리얼: CSS 비디오 튜토리얼 ]

먼저 그림을 보겠습니다:

CSS 모듈의 작동 원리를 이해하기 위한 그림:

우리가 직접 코딩할 때 두 개의 파일이 있었는데 하나는 ProductList .less 파일 중 하나는 ProductList.jsx 파일입니다.
빌드 후 less 파일은 파란색 제목의 파일로 변환됩니다.

다음에서 볼 수 있습니다.

• 버튼 클래스는 생성 후 ProductList_button_1FU0u로 이름이 변경됩니다. 버튼은 로컬 이름이고 ProductList_button_1FU0u는 글로벌 이름입니다. 이름 충돌에 대한 걱정 없이 짧고 설명이 포함된 이름을 사용할 수 있습니다.

그런 다음 css/less 파일에 .button {…}을 작성하고 구성 요소의 styles.button을 통해 참조하기만 하면 됩니다.

전역 CSS 정의

CSS 모듈은 기본적으로 로컬 범위입니다. 전역 규칙을 선언하려면 :global 구문을 사용할 수 있습니다.

예:

.title {
	color: red;
}
:global(.title) {
	color: green;
}

인용할 때:

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

일부 복잡한 시나리오에서는 요소가 여러 className에 해당할 수 있으며 각 className은 일부 조건에 따라 표시 여부를 결정합니다. 이때 classnames 라이브러리는 매우 유용합니다.

import classnames from 'classnames';
const App = (props) => {
	const cls = classnames({
		btn: true,
		btnLarge: props.type === 'submit',
		btnSmall: props.type === 'edit',
	});
	return <div className={ cls } />;
}

이런 방식으로 다양한 유형이 App 구성 요소에 전달되면 다양한 className 조합이 반환됩니다.

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 튜토리얼을 방문하세요! !

위 내용은 CSS 모듈이란 무엇입니까? 함께 알아봅시다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!