Closed7

Svelteで最強の動的CSS

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

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' }} />

一応完成形

このスクラップは2021/05/17にクローズされました
ログインするとコメントできます