[TIL] 03.25 css 우선 순위, sass classNames 선택자

BaseButton Component는 기본적으로 모든 버튼 형식을 받고 기본적인 CSS 를 적용해준다. 

그래서 부모 컴포넌트에서 CSS를 적용했을 경우 만약 size: 55px 로 지정하고 BaseButton 에서 60px로 지정을 해둔 상태면 BaseButton 의 CSS가 적용이 되었다. 

부모컴포넌트의 CSS가 우선 적용이 되는것이 아닌가 라고 생각했는데 그것이 아니였다. 

 

스타일 적용 순위

1. 인라인 스타일 

2. 내부 스타일

3. 외부 스타일

4. 브라우저 기본값 

 

위와 같은 순서로 스타일이 적용이 된다. 만약 같은 등급이라면 가장 최종적으로 적용되는 것이 우선시 된다. 

만약 강제로 우선 순위를 적용하고 싶다면 !important를 사용하면 된다.

(개별 속성에 적용되고 IE6 이전 버전은 인식되지 않을수 있기 때문에 꼭 필요하지 않는이상 사용하지 않는것이 좋다.)

button {
	color: black !important;
}

참고 블로그 : https://aboooks.tistory.com/120

 

sass classNames

classNames를 사용하여 class를 지정해 줄때 적용이 안되는 에러가 나타났다. 

classNames는 여러 종류의 파라미터를 조합하여 CSS 클래스를 설정 할 수 있게 해준다. 

Css Module 과 같이 사용을 할때는 classnames/bind 를 사용하여 cx('class1', 'class2') 형태로 사용이 가능하다. 

// 기본적인 사용 방법
import classNames from 'classnames';

classNames('one', 'two'); //'one two'
classNames('one', { two: true }); // 'one two'

//CSS Module과 같이 사용 

import React from 'react';
import classNames from 'classnames/bind';
import styles from './CSSModule.module.css';

const cx = classNames.bind(styles); // 미리 styles 에서 클래스를 받아오도록 설정하고

const CSSModule = () => {
  return (
    <div className={cx('wrapper', 'inverted')}>
      <span className="something">CSS Module!</span>
    </div>
  );
};

export default CSSModule;

 

classNames를 사용할 때 적용이 되지않는 에러가 생겼는데 원인은 클래스와 관련이 있었다. 

import React from 'react';
import classNames from 'classnames/bind';
import styles from './Button.module.css';

const cx = classNames(styles)


const Button = ({
	size, // string
    	border, //boolean
}) => {
  const classes = cx(
	size,
    {
    	border,
    }
  )

}

//Button.module.css

.circle{
	&.large{
		size: 60px;
	}

	&.border{
		border: 1px solid black
	}
}

 

size 는 large, regular 등으로 값을 받아서 해당 변수가 바로 이름을 찾아서 지정이 되기 때문에 {} 안에 넣지 않아도 된다. 

하지만 border 처럼 boolean 값으로 내려 받는 값들은 border가 존재하는지 아닌지를 구분하기 때문에 {} 안에 넣어주어야 한다.