Svelteで動的なCSSを調査

mouse 2021/05/17

Svelteは（標準で）いい感じに動的にCSSが使えない

Vueはbindでいい感じ Reactはjsxだからそのまま

mouse 2021/05/17に更新

cssのvarを使うパターン

mouse 2022/12/17に更新

クリックされたらとかならclassをいじればいいけど
heightとか数字が変わるタイプはすべてclass作るわけにいかないしめんどくさい

mouse 2021/05/17

参考になるかも: https://sveltesociety.dev/recipes/svelte-language-fundamentals/passing-values-from-js-to-css

mouse 2021/05/17

style.js

import type { Properties } from 'csstype';

const style = (node: HTMLElement, parameters: Properties<string | number>) => {
  Object.entries(parameters).forEach(([key, value]) => {
    node.style.setProperty(key, value);
  });
};

export default style;

index.svelte

<script lang="ts">
　　import style from './style';
　　export let height: `${number}px` = '0px';
</script>

<div use:style={{ height }} />
<div use:style={{ color: 'red' }} />

mouse 2021/05/17

一応完成形

mouse 2021/05/17

ライブラリにした

このスクラップは2021/05/17にクローズされました