CODEWITHSUNDEEP
cssreactjstypescriptmaterial-ui
Addicted2Cookies
Addicted2Cookies

Reputation: 84

Typescript Error for align in Material UI

<Grid item xs={12} align="center">

gives me

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { alignContent?: GridContentAlignment | undefined; ... 7 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: Element; item: true; xs: 12; align: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
    Type '{ children: Element; item: true; xs: 12; align: string; }' is not assignable to type 'IntrinsicAttributes & Partial<Record<Breakpoint, boolean | GridSize>> & { alignContent?: GridContentAlignment | undefined; ... 7 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>'.
      Property 'align' does not exist on type 'IntrinsicAttributes & Partial<Record<Breakpoint, boolean | GridSize>> & { alignContent?: GridContentAlignment | undefined; ... 7 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps<...> & Pick<...>'.ts(2769)
OverridableComponent.d.ts(17, 7): 'component' is declared here.
(JSX attribute) xs?: boolean | GridSize | undefined

Note that im using tsx btw, no idea why this is throwing at me. I changed my file extension to jsx and everything works fine (also the Grid is from material ui)

also, the problem is occurring in the `align="center" part, if i remove that no errors will appear

I've also tried changing align to alignItems and alignContent, that solves the error; however it doesnt make the content align to the center

On a side note, not sure whether related or not: on the same file, I have a line:

<div style={{ align: "center" }}>

which also throws me an error of:

Type '{ align: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and 'align' does not exist in type 'Properties<string | number, string & {}>'.ts(2322)
index.d.ts(1760, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Upvotes: 1

Views: 4125

Answers (1)

Sowam
Sowam

Reputation: 1746

There is no property like align="center" in Material UI. Here you can read that there is justify="center" and alignItems="center". You can also see examples there so you can apply it to your project.

Additionally remember to use <Grid container> above <Grid item> to be able to manage it. Also <Grid container> can have item inside it like <Grid container item>. I had same problems before so I hope it will help you out.

Here you have a working solution - LINK

Upvotes: 2

Related Questions