Spreading CSS Prop

[Sir-hennihau]

Hi guys,

I'm trying the following, but it doesn't work.

const dividerStyle = { css: "border-bottom: 1px solid red;" };


// within return statement of component
<Section
        {...dividerStyle}
/>

It's part of using css prop with reusable, dynamic styles.

Do you got an idea why spreading the css prop doesn't work?

[hydenz]

Apparently, the CSS Prop is not working correctly on custom components (at least in my app) and its only working in HTML Tags
The workaround is to spread props in my custom component child. Example:

const MyCustomComponent = ({prop1, prop2, ...props}) => {
    return <div prop1={prop1} prop2={prop2} {...props}>This is a example!</div>
}

export default MyCustomComponent

Then you can use

<MyCustomComponent prop1="example" prop2="example" css="border-bottom: 1px solid red;"/>

Edit: Better yet, you can pass just className prop instead of spreading all props.
<div prop1={prop1} prop2={prop2} className={className}>This is a example!</div>

Hope that helps you!

[quantizor]

Can y'all try 1.13.2-test.0 and let me know if it fixes your issue?

[quantizor]

Alright so I made a lot of improvements to the plugin in 1.13.2 but I don't think this scenario will work:

const dividerStyle = { css: "border-bottom: 1px solid red;" };

// within return statement of component
<Section
        {...dividerStyle}
/>

Essentially, it's really hard to trace back the dividerStyle variable and then inspect it to know if css is in it... then all the other transpiling activities that happen. It could be in another file for example and just imported...

If someone can find an example of another babel plugin adding support for this sort of reflection I'd give implementing it here a go, but in the absence of an example I don't see it landing.