Troubleshooting issue with alignment in Material UI using Typescript

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

is causing an issue for 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

I'm using tsx and changing the file extension to jsx works fine (the Grid is from material ui)

The issue arises with the `align="center" part, if I remove that, no errors occur

I've also tried changing align to alignItems and alignContent, which removes the error but doesn't center the content

Additionally, in the same file, I have:

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

This also gives me an error:

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>'

Answer №1

In Material UI, there isn't a property like align="center". Instead, you can use justify="center" and alignItems="center". Check out the link for examples that can be applied to your project.

Don't forget to include <Grid container> before using <Grid item> so you can manage it effectively. You can also have items within a <Grid container item>. I've faced similar issues in the past, so hopefully this information will help you overcome them.

For a working solution, click on this LINK

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

Looking to retrieve data from a MySQL View in Spring application and send it to the REACT front end

To enhance the communication between my Spring MySQL backend and React frontend, I am attempting to retrieve a multi-table VIEW through AXIOS. For testing purposes, I am using POSTMAN at (http://localhost:8080/api/v1/cpysiteassetview). Despite being on t ...

Struggling with how to customize the input component from react-native-elements? Let

I am currently exploring how to customize the appearance of an input using react-native-elements, similar to the design depicted in the documentation... My goal is to achieve the look of the top inputs with a white background, but I am uncertain about th ...

Discovering active path while utilizing dynamic routes - here's how!

Whenever I click on the project element in my HeadlessCMS with the URL /projects/slug-name, the projects button in my Navbar (LinkItem) does not highlight with a background color (bgColor). How can I modify this line of code: const active = path === href / ...

Issue: In React Chart Component, encountering a TypeError while attempting to access properties of an undefined object, specifically the 'year' property. Seeking a solution for implementing filtering by year

I've run into a TypeError while working on a React project that involves using a Chart component to showcase user analytics data fetched from an API. Additionally, I'm looking for advice on how to incorporate filtering by year. The error message ...

Height of the Accordion List

I have a code snippet below for an accordion list that I put together. I initially set the height for all the heading boxes to be uniform, but it seems like box A is displaying larger than the others. Can you help me figure out what went wrong? Any suggest ...

Which specific element should the userEvent.type(...) function target in order to work effectively with MUI's DesktopDatePicker TextField component?

Is there a way for me to input text into the TextField input within the MUI datepicker using react-testing-library's user-event? I've noticed that there is a mask applied to the input. I attempted to use userEvent.type(inputEl, '1') an ...

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

What steps should I follow to download a file from a URL and store it in a React folder

Is there a way for me to download obj and mtl files from my database or Onedrive and save them in a React app? I need these files for my 3D models and want to be able to load dynamic objects from a database for this feature. I am currently using three.js i ...

Arranging Bootstrap dropdown and buttons on a single line

Check out my code snippet here: http://jsfiddle.net/52VtD/7462/ I'm facing an issue where I want to align my dropdown and buttons on the same line, but the dropdown being a div, it stays on the line below. How can I ensure they are on the same line? ...

Guide to setting data types for [key, value] pairs within a forEach iteration

I am currently encountering a typescript syntax error in my project that is indicating the need to define the prodStatus variable... const products = { 1: {isUpdating: false, qty: 2}, 2: {isUpdating: true, qty: 4} } const updatingProducts: Array< ...

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...

Using CSS to overlay text on an image on a webpage

Can anyone help me with this puzzling scenario? <TD><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/m21.jpg',1)">Home</a><img src="images/m2.jpg" nam ...

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

An object named CONFIG holds the following information: export const CONFIG = { buttonDestinations: { detailedStats: `detailedStats`, mealPlans: `mealPlans`, products: `products` }, buttonTexts: { detailedStats: ...

Creating a personalized component library that can be shared across various React projects

Unique Scenario Application A requires CustomButton.jsx Application B also needs to use CustomButton.jsx Innovative Solution Determine a common project, Application C, that includes CustomButton.jsx. Save Application C in a shared location like a publ ...

A guide on accessing the content of two p tags in React by utilizing the useState hook in ReactJs

I am currently working on retrieving the values of two p tags simultaneously to send those values to the backend. This is my useState declaration: const [isProposal, setIsProposal] = useState({ contractorName: "", newProposal: "" }); c ...

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

Is it possible to create a custom options array in React-Select?

I've been working with react-select using the package from . The required format for the options prop is {value:something, label:something}. I have a list of objects with additional key-value pairs and I'm wondering if there's a way to avoi ...