Lism

LismのCSS設計に対応した様々なプロパティを受け取ることができるようになっている汎用的なコンポーネントです。
何も指定がなければ、ただの<div>を返します。

<Lism p="20" fw="bold" c="blue" bgc="base-2" bdrs="20">
  Lism content
</Lism>

<div class="-p:20 -fw:bold -c -bgc:base-2 -bdrs:20" style="--c: var(--blue)">Lism content</div>

Import

import { Lism } from 'lism-css/react';

import { Lism, Media } from 'lism-css/astro';

Lism Props

<Lism>が受け取る Lism CSS 専用プロパティ（Lism Props）については、別ページで詳しく解説しています。

Astroで<Lism>をラップする際のProps型

Astroで<Lism>をラップした独自コンポーネントを作る場合、Props型はinterface extendsではなく**交差型（&）**で合成してください。

import { Lism } from 'lism-css/astro';
import type { ComponentProps } from 'astro/types';

type LismProps = ComponentProps<typeof Lism>;

// OK: 交差型で合成する
type Props = LismProps & {
  class?: string;
};

LismのProps型には、layoutの値によって受け取れるプロパティが切り替わるユニオン型が含まれています。そのため、interface extendsで拡張しようとすると次のようなTypeScriptエラーになります。

// NG: interface extends はエラーになる
interface Props extends LismProps {
  class?: string;
}
// エラー: インターフェイスが拡張できるのは、オブジェクト型または
// 静的な既知のメンバーを持つオブジェクト型の積集合のみです。