An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Pearsonified
- Abduzeedo
- Vandelay Design
- Naldz Graphics
- FanExtra - PSD
- Fudge Graphics
- Web Design Ledger
- Reencoded
- CSS Tricks
- Willems Lab
Help Webnuz
Referal links:
August 16, 2020 09:40 am GMT
Original Link: https://dev.to/emma/using-css-in-js-with-preact-30ko
Using CSS-in-JS with Preact
The two most popular CSS-in-JS libraries, styled-components and Emotion, dont support Preact out of the box. However there is an easy workaround.
Add these aliases to your webpack.config.js file:
module.exports = { resolve: { alias: { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat', }, },};Adding these aliases allows you to use other libraries intended for React too!
And if youre using Storybook, youll need to add the same alias to your .storybook/main.js file:
module.exports = { stories: ['../app/javascript/**/story.tsx'], webpackFinal: async config => { config.resolve.alias = Object.assign({}, config.resolve.alias, { react: "preact/compat", 'react-dom': 'preact/compat' }) return config; },};After this you can install your preferred package:
npm i @emotion/styled# ORnpm i styled-componentsAnd use either styled-components or Emotion without any problems:
import styled from '@emotion/styled'; // ORimport styled from 'styled-components';export const Container = styled.div` background-color: pink;`;Original Link: https://dev.to/emma/using-css-in-js-with-preact-30ko
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To