Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme need more info about using CSS #1250

Open
Seanmclem opened this issue Aug 2, 2023 · 1 comment
Open

Readme need more info about using CSS #1250

Seanmclem opened this issue Aug 2, 2023 · 1 comment

Comments

@Seanmclem
Copy link

Seanmclem commented Aug 2, 2023

For mitosis, the docs seem to clearly go over how your template and state etc will be set up. But besides brief mention of a CSS prop in a blog post, I have found very little about utilizing any sort of CSS patterns or files in mitosis. Seeing as how that's kind of an essential part of HTML and CSS, The readme or docs really need updates regarding this. A few more examples would go a long way.

I understand the idea of that, "just uses a CSS or style prop" seems sufficient. But styling is super important too and any reference to how mitosis might integrate with any slightly more complicated styling patterns would be nice.

@Seanmclem Seanmclem changed the title Docs need more info about using CSS Readme need more info about using CSS Aug 2, 2023
@nmerget
Copy link
Contributor

nmerget commented Apr 12, 2024

We build our design-system with mitosis maybe you can check it for some inspiration.

I guess there are 3 options for CSS in mitosis:

  1. css-in-js: This is the described way in docs
  2. import CSS inside mitosis: You can import CSS files directly via your mitosis component, but you need to handle the bundling by yourself, there is no build step in mitosis to move the .css files into the correct location of your output directory
  3. standalone components: Don't bundle CSS into your component, instead load your CSS inside your consuming app (that's what we did)

We tested 2. but had some drawbacks, so we decided to go with 3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants