BuilderIO / BuilderIO/mitosis

Confusion around how to add and use CSS classes

Open
#1,024 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
14.4k
Forks
671
PR merge metrics
No merged PRs in 30d

Description

Hi!

I'm going through [the docs](https://github.com/BuilderIO/mitosis/blob/main/docs/components.md#class-vs-classname) and find it says to use 'class' over 'className' which is fine.

Currently I can't see any documentation on where to put my class styles. Is using an external .css file possible ? Or styled components? Just need some info and example code on how to set this up please.

Secondly I tried using the `css` prop and using the exported component in React, but it just renders to '[object Object]' in the DOM :

seeker.lite.tsx:

`


...
`

Results in seeker.jsx:

`


...
`

DOM result:
![image](https://user-images.githubusercontent.com/23125742/217568027-0581f7ec-db77-499c-8da2-d40acec8b64b.png)

Thanks for your time
__

Sam

Contributor guide

Open the contributing guide

Research direction

Start with docs/components.md#class-vs-classname, then reproduce the example from seeker.lite.tsx and compare the generated seeker.jsx and React DOM output. Review how the css prop is handled and document supported external CSS or styled-component usage, with examples and corrected or clearly explained React output as the done criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
documentation, frontend
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.