CODEWITHSUNDEEP
javascriptreactjscreate-react-app
chris
chris

Reputation: 4996

creat-react-app build not accepting styles

I am moving my react app from self managed webpack build to a create-react-app based one. My styles are not compiling 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.

Upvotes: 3

Views: 4456

Answers (2)

Shreyans Shrivastav
Shreyans Shrivastav

Reputation: 527

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

Upvotes: 1

Cristian S.
Cristian S.

Reputation: 973

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

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

Upvotes: 7

Related Questions