Confusion around how to add and use CSS classes

[samuelOsborne]

Hi!

I'm going through the docs 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:

<div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginRight: '5px', marginLeft: '5px', position: 'relative', }}> ...

Results in seeker.jsx:

<div css={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%", marginRight: "5px", marginLeft: "5px", position: "relative", }} > ...

DOM result:

Thanks for your time __

Sam

[samuelOsborne]

replacing css with style seems to work

[samijaber]

@samuelOsborne I need some more information. Following the bug issue format helps because it requires a link to a mitosis.builder.io fiddle, which shows how to reproduce this issue reliably.

here is the code you shared in a fiddle: link

Note that you can provide a stylesType property to the React generator, which chooses how to handle the css prop. The default is styled-jsx, not sure if that's what you're using. But if you are, you'll need to import the correct library (whether that, or emotion). You can see the toggle in the fiddle

[patrick-kw-chiu]

replacing css with style seems to work

IINW, style seems to generate inline styling and css seems to generate a styled-component or a CSS class. In React, it is styled-component. In Svelte, it is a CSS class. In my case, I am able to dynamically generate styling in style (by props value or return of a function), but it has to be static in css.

Here is a Github Activity Calendar I'm building

And the generated styling from Chrome dev tool

And a snippet of the code for reference

export default function Day(props: DayProps) {
  return (
    <div
      onClick={() => props.onClick(props.dt)}
      css={{
        position: 'absolute',
        width: '10px',
        height: '10px',
        outline: '1px solid rgba(27, 31, 35, 0.06)',
        outlineOffset: '-1px',
        borderRadius: '2px',
      }}
      style={{
        backgroundColor: getBgColor(props.opacity),
        opacity: props.opacity === '0' ? '1' : props.opacity,
        top: props.top,
        right: props.right,
      }}
    ></div>
  );
}