CSS for Atomify.
npm install @atomify/css``sh`
npm i @atomify/cssuseStyles$3
The hook appends the styles in three different ways:adoptedStyleSheets
1. It appends the styles to the if available and supported by your browser Constructable Stylesheets.shadowRoot
2. It appends it to the when adoptedStyleSheets and the useShadowDom:true is set.useShadowDom:false
3. It will append the styles to the document.head when , and it will automatically scopes the styles.
Add styles to your component
Define styles in a tagged template literal, using the css tag function.
`tsx
....
import { css, useStyles } from '@atomify/css';
const CustomElement = ({ element, update }) => {
// Single tagged template literal
useStyles(() =>
css
:host {
display: block;
background-color: tomato;
}
);
// An array of tagged template literals
useStyles(() => [
css...,...
css,
]);
return (
Sharing styles
You can share styles between components by creating a
const is exporting a tagged style:`tsx
....
const generalButtonStyling = css;const CustomElement = ({ element, update }) => {
// An array of tagged template literals
useStyles(() => [
generalButtonStyling,
css
]); return (
Hello World!
);
};
`Using non
css literalIf you must use an variable in a
css literal that is not itself a css literal, and you are sure that it is a safe source then you can wrap the source within a unsafeCSS hook:`typescript
const color = 'green';css
${unsafeCSS(color)};
``