0

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!

fassetar
  • 615
  • 1
  • 10
  • 37
mlxciii
  • 1

1 Answers1

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.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
zahra shahrouzi
  • 862
  • 7
  • 18
  • 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. – jfdoming Feb 01 '21 at 19:21