[Solid][CSS] SolidJS에서 macaron 사용하기

SolidJS 환경에서 Macaron js를 설치해서 사용하는 방법입니다.

자세한 내용은 공식 사이트에서 확인할 수 있습니다.

https://macaron.js.org/docs/installation

macaron — Colocated CSS-in-JS with zero-runtime

 

1. 라이브러리 설치

설치를 원하는 프로젝트 폴더에서 다음 명령어를 실행합니다.

# npm
npm install @macaron-css/core @macaron-css/solid

# yarn
yarn add @macaron-css/core @macaron-css/solid

※ React의 경우, 아래와 같이 사용합니다.

# npm
npm install @macaron-css/core @macaron-css/react

# yarn
yarn add @macaron-css/core @macaron-css/react

2. macaron 플러그인 적용

앞서 SolidJS 설치 때 vite 템플릿을 사용했으므로, vite 버전을 기준으로 설명합니다.

먼저 아래 명령어를 실행합니다.

npm install @macaron-css/vite

그 후, vite.config.js (혹은 vite.config.ts) 파일에서 macaronVitePlugin을 import하고, plugins 목록에서 1순위로 추가합니다.

import { macaronVitePlugin } from '@macaron-css/vite';  // 추가
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    macaronVitePlugin(),  // 추가 (맨 앞)
    // other plugins
  ],
});

3. 사용법

style을 적용하는 방법은 macaron-css/core를 사용하는 방법과 macaron-css/solid를 사용하는 방법 크게 두 가지가 있습니다.

 

core는 style( ) 함수를 사용합니다.

객체를 인자로 받으며, 태그의 class값으로 사용해서 스타일을 적용합니다.

import { style } from '@macaron-css/core';

const AppStyle = style({
    backgroundColor: "red",
    borderRadius: "10px",
    fontSize: "50px"
})

const App: Component = () => {
  return (
    <button class={AppStyle}>
    macaron-css/core style
    </button>
  );
};

solid는 styled( ) 함수를 사용합니다.

html 요소 종류와 객체를 인자로 받으며, 스타일 이름을 새로운 태그로 하여 컴포넌트처럼 사용합니다.

import { styled } from '@macaron-css/solid';

const Button = styled("button", {
  base: {
    backgroundColor: "red",
    borderRadius: "10px",
    fontSize: "50px"
  },
});

const App: Component = () => {
  return (
    <Button>macaron-css/solid</Button>
  );
}