I am moving my react app from self managed webpack build to a create-react-app based one. My styles are not piling correctly, for example, in my main render method:

      return (
        <Grid>
            <Row style={headerStyle}>
                <Col xs={12}>
                <h1 style={{'text-align': 'center', 'color': 'white'}}>
                    Dashboard v0.3 
                </h1>
                </Col>
            </Row>
       </Grid>
       )

I get the error Warning: Unsupported style property text-align. Did you mean textAlign?. There are a bunch of errors like this. Any help would be appreciated.

I am moving my react app from self managed webpack build to a create-react-app based one. My styles are not piling correctly, for example, in my main render method:

      return (
        <Grid>
            <Row style={headerStyle}>
                <Col xs={12}>
                <h1 style={{'text-align': 'center', 'color': 'white'}}>
                    Dashboard v0.3 
                </h1>
                </Col>
            </Row>
       </Grid>
       )

I get the error Warning: Unsupported style property text-align. Did you mean textAlign?. There are a bunch of errors like this. Any help would be appreciated.

• javascript
• reactjs
• create-react-app

Share Improve this question Follow asked Apr 19, 2018 at 10:01 chrischris 5,00655 gold badges3939 silver badges6969 bronze badges 2

• When using inline styles or JS styles you can't have dashes in property names, because it's an object. So text-align bees textAlign, or border-top bees borderTop, and so on – Jayce444 Commented Apr 19, 2018 at 10:03
• my point is that before in my old system it was transpiled correctly but now it doesn't – chris Commented Apr 19, 2018 at 10:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You are using the wrong syntax. It should be like this:

<h1 style={{textAlign: 'center'}} >

In react css work like the following:

<div style={{
    fontFamily: 'Consolas',
    padding: 10,
    color: "#444",
    border: "3px solid orange",
    position: "relative",
    width: "15%",
    height: "25px",
    letterSpacing: 0,
    overflow: "hidden",
    fontSize: 10,
    fontVariant: "small-caps"
}}
>
Hello
</div>

not like this

<div style="font-family: Consolas;
    padding: 10px;
    color: #444;
    border: none;
    border: 3px solid orange;
    position: relative;
    width: 15%; height: 25px;
    letter-spacing: 0;
    overflow: hidden;
    font-size: 10px;
    font-variant: small-caps;"
>
text
</div>

I hope this would help