Skip to content

CSS in JS

Oleksiy Rudenko edited this page Mar 18, 2021 · 1 revision

Source: https://codesandbox.io/s/pedantic-wilson-41ip7?file=/src/index.ts:0-442

//@ts-expect-error
import kebabCase from "kebab-case";

const styles = {
  color: "blue",
  fontFamily: "comic sans ms",
  fontSize: "42px"
};

Object.defineProperty(styles, "toString", {
  value: function (this: string) {
    return Object.keys(this)
      .map((key) => `${kebabCase(key)}:${this[key]}`)
      .join(";");
  },
  writable: false
});

document.getElementById("app").innerHTML = `
  <div style="${styles}">Hello world</div>
`;

Home

Framework dev plan


Sources of inspiration

Clone this wiki locally