svelte-draft
svelte-draft copied to clipboard
Scss and Styled components
Hi, Congratulations for this project! It's amazing! It's the coolest project I found this year! I wonder if it's already possible to import Scss files similar to React?
App.tsx
import styles from './App.module.scss'
export default function App() {
<p>This is a paragraph.</p>
<p class={styles.myParagraph}>Another paragraph</p>
}
App.module.scss
.myParagraph{
color:blue
}
Or to use styled-components like this:
import styled from "styled-components";
const Paragraph = styled.p`
font-size: 15px;
text-align: center;
`;
Thanks!
Currently, scss
and styled-components
are not supported, the only way to use css
is to place a .css
file along side .tsx
file, for example: 9-motion/spring.
In implementation, see create style section, then insert style section.
I found that we can use css-in-js in svelte: https://svelte.dev/blog/svelte-css-in-js. So I added a demo in svelte-draft-template, see demo/css-in-js branch.