Lism CSS
Docs
検索

Lism

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

Lismで配布しているほぼ全てのコンポーネントは、この<Lism>がベースになっています。

↓
<Lism>の出力例
Lism content
<Lism p="20" fw="bold" c="blue" bgc="base-2" bdrs="20">
  Lism content
</Lism>

Import

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

Lism Props

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

Lism Props

<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。

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;
}
// エラー: インターフェイスが拡張できるのは、オブジェクト型または
// 静的な既知のメンバーを持つオブジェクト型の積集合のみです。

この制約は<Lism>だけのものではありません。<Text>や<Wrapper>など、layout Propを受け取れるコンポーネントのProps型にも同じユニオン型が含まれるため、これらをラップする場合も同様に交差型で合成してください。

一方、<Cluster>や<Stack>などlayoutが固定されているレイアウトコンポーネントのProps型にはユニオン型が含まれないため、interface extendsでも書けます。ただし、どのコンポーネントでも同じように書けるよう、交差型での合成をおすすめします。

getLismProps()

asに外部コンポーネントを渡せないなどの理由で<Lism>を使えない場合は、getLismProps()でLism PropsをclassNameとstyleに変換できます。

import getLismProps from 'lism-css/lib/getLismProps';


function MyComponent({ children }) {
  // Lism Props を className と style に変換する
  const lismProps = getLismProps({ p: '20', fz: 'l', c: 'red' });
  // → { className: '-p:20 -fz:l -c', style: { '--c': 'var(--red)' } }


  return <div {...lismProps}>{children}</div>;
}

Lism Props以外のプロパティ（hrefなど）は、そのまま戻り値に含まれます。

lism-css/lib/・lism-css/react/・lism-css/astro/の下にあるファイルを直接指すパスのうち、公開APIはlism-css/lib/getLismPropsだけです。それ以外は内部用のため、マイナーバージョンの更新でも変わることがあります。コンポーネントはlism-css/reactやlism-css/astroから読み込んでください。

© 2026 Lism CSS.