React withStyles throws error when using 'direction'

Question

I have a simple React website and am using the withStyles feature to pass styles to a material-ui Grid element. When trying to use direction: "column" in the style, I get the error message included below.

This is in a .jsx file. I have found a fix by specifying type, but that only works for TypeScript.

Here is the App.jsx file:


const styles = theme => ({
    root: {
        direction: "column",
        justify: "center",
        alignItems: "center",
    },
});

function App(props) {

    return (
        <div>
            <Grid container className={props.classes.root} >
                <Typography variant="h2">
                    Test Website
                </Typography>
                <TextField
                    id="input-user"
                    label="User"
                    value={1}
                    margin="normal"
                    variant="outlined"
                />

            </Grid>
        </div>
    )

}

export default withStyles(styles)(App);

The error message I am getting is this:

Argument of type '(theme: any) => { root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "root">'.
  Type '(theme: any) => { root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "root">'.
    Type '{ root: { direction: string; justify: string; alignItems: string; }; }' is not assignable to type 'Record<"root", CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>'.
      Types of property 'root' are incompatible.
        Type '{ direction: string; justify: string; alignItems: string; }' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
          Type '{ direction: string; justify: string; alignItems: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'direction' are incompatible.
              Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "ltr" | "rtl" | ((props: {}) => DirectionProperty)'.

Thank you for any help.

Are you using typescript in other parts of your project? – Nicholas Tower Jun 28 '19 at 14:12 — Nicholas Tower, Jun 28 '19 at 14:12

score 2 · Accepted Answer · answered Jun 28 '19 at 14:28

2

this is because there is no type column in direction property. it can take a string of type:

ltr
rtl
initial
inherit

answered Jun 28 '19 at 14:28

Kareem Dabbeet

3,838
3
16
34

Thanks for your answer Kareem. I'm going off the documentation [here](https://material-ui.com/api/grid/) that shows `direction` can have `column` among other things for a material ui Grid. Adding a `direction="column"` directly to the Grid tag works as intended. I'm just confused as to why it won't work when using withStyles(). – jpc Jun 28 '19 at 14:31
that's because withStyles is piure css, in css you don't have `column` in 'direction'. see [this]. Howerver: what you wrote now: is you've add new prop to Grid Component. so this is JSX, not HTML or CSS. Grid Component takes: `direction = "column"` prop and assign css styles to make it look as you want. So the reason is that you're writing JSX property that is understood by Grid Component [this]: https://www.w3schools.com/cssref/pr_text_direction.asp – Kareem Dabbeet Jun 28 '19 at 14:52
That explains it, thank you very much! Is there a way to use the `direction` prop outside of the tag as a style, or is it best practice to just write it out in every tag? – jpc Jun 28 '19 at 15:43
actually you cant, we don't know how the library built the code to fit `direction="column"` prop. The best practice is to design you own wrapper component, and style it as you want `` for example. Now Every time you want this style to any component with this styles just wrap it with `Column` component that you've built. Other solution is to simply add all your styles in css class and use it wheterever you want – Kareem Dabbeet Jun 28 '19 at 15:52

score 0 · Answer 2 · answered Feb 04 '20 at 15:31

0

You could also try the following line export default withStyles(styles as {})(App); which saved me.

answered Feb 04 '20 at 15:31

Fred

397
2
5
17

React withStyles throws error when using 'direction'

2 Answers2