How to write inline css in string rather than object?

Question

Is there any way to write inline css in string rather than object format?

I tried this but it obviously didn't work:

<div style={"color:red;font-weight:bold"}> Hello there </div>

Why am I doing this?

I usually write some inline css first and once it looks good in the browser I copy paste that inline into my .scss file
but if I use objects I'll first have to convert them into css format and then paste them into my file which would be really tedious

( Note: If it is not possible I'm also open to using a vscode extension which converts object into css )

You can try this or the CSS-in-JS extension. const myStyle = { color: 'red', fontWeight: 'bold', }; const inlineStyle = Object.entries(myStyle) .map(([property, value]) => ${property}:${value}) .join(';'); return <div style={inlineStyle}>Hello there</div>; — user15811966
– user15811966, Commented Sep 26, 2023 at 12:29
@Konrad Not really that doesn't solve my main question and is more of a workaround (but still appreciated) — cak3_lover
– cak3_lover, Commented Sep 26, 2023 at 12:29
@cak3_lover - FWIW, if your "main question" is "is it possible to use a string instead," the answer is "no." So a workaround is the best you're going to get. — T.J. Crowder
– T.J. Crowder, Commented Sep 26, 2023 at 12:31

2 revs · Accepted Answer · 2023-09-26 12:48:00Z

2

No, you can't use a string instead, not without a workaround that may be more effort than it's worth.¹ From the documentation:

When using inline styles in React, you can use React.CSSProperties to describe the object passed to the style prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the style prop, and to get auto-complete in your editor.
interface MyComponentProps {
  style: React.CSSProperties;
}

In the comments, Konrad pointed to this question, which has an answer linking to a tool that converts between the two formats.

¹ For instance, Konrad also found and linked to this blog post which shows code for a function that converts a string to an object at runtime. So you could do style={theFunction("your styles")}. But aside from unnecessary complication, that would involve re-converting the string on every render (unless you memoized it, which costs memory and even more complexity...). Still, it's an option.

edited Sep 26, 2023 at 12:48

community wiki

2 revs
T.J. Crowder

Sign up to request clarification or add additional context in comments.

2 Comments

cak3_lover Over a year ago

stupid question but I gotta ask, will next.js ever support inline css as strings or is there any proposal to add it?

T.J. Crowder Over a year ago

@cak3_lover - I wouldn't know. The place to ask would probably be their issue list.

cak3_lover · Accepted Answer · 2023-10-01 09:01:30Z

1

Incase anyone was wondering I ended up using this extension

It was the only one which seemed to be working for me ¯_(ツ)_/¯

answered Oct 1, 2023 at 9:01

cak3_lover

2,0802 gold badges25 silver badges68 bronze badges

Comments

vijay jadhav · Accepted Answer · 2023-09-26 12:28:29Z

-3

Don't Use Object, Just use like this

<div style="color:red;font-weight:bold"> Hello there </div>

answered Sep 26, 2023 at 12:28

vijay jadhav

753 bronze badges

1 Comment

Konrad Over a year ago

Doesn't work codesandbox.io/s/hopeful-germain-3jstt4?file=/src/App.js The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Collectives™ on Stack Overflow

How to write inline css in string rather than object?

Why am I doing this?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Why am I doing this?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related