Styling with flexbox inside functional component using react

Question

For reference this article explains on how to style a component: https://reactjs.org/docs/dom-elements.html#style

When I do a simple statement like:

const cardStyle = {
        display: flex,
        justifyContent: center,
        alignItems: center,
        backgroundColor: `${bgColor}`,
        color: color,
        height: '150px',
        width: '300px'
}

I get the following error:

  Line 19:18:  'flex' is not defined    no-undef
  Line 20:25:  'center' is not defined  no-undef
  Line 21:21:  'center' is not defined  no-undef

Search for the keywords to learn more about each error.

I found this answer online but it wasn't to helpful Link

This is my first question, so I appreciate your response. Thank you!

Imran Rafiq Rather · Accepted Answer · 2021-02-01 19:39:18Z

3

Writing CSS code inside jsx is not like writing pure CSS, for instance here are some points about CSS in js/jsx:

Every right value should be inside quotation mark so u should use"center" or "space-between" or "100%" ...but the exception is numbers which is equal to ${number}px.
Every left value should be camel cased and there is no dash .
There is no semi-colons (;) but instead we use comma (,)

that's all I remember for now

and the answer to your question is that it should be like this:

const cardStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: bgColor,
    color: color,
    height: '150px',
    width: '300px'
}

So, we are basically using an Object for our inline styles in JSX.

edited Feb 1, 2021 at 19:39

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

answered Feb 1, 2021 at 19:16

zahra shahrouzi

1,0129 silver badges20 bronze badges

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

1 Comment

jfdoming Over a year ago

To add to this answer, the reason this works is because when you don't put quotes around flex, React thinks it's a variable and not a CSS style.

Collectives™ on Stack Overflow

Styling with flexbox inside functional component using react

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related