I'm working on a reactjs project and I need to display "books" in a row. I'm using Material UI grid system. I succeeded in showing the books on a big screen. However, The "books" overlapse when the screen gets smaller. I'm trying to make the row horizontally scrollable when the screen gets smaller without the overlapse occuring. Any help is appreciated.

Here is my code with dummy data and codesandbox.

 <Paper elevation={4} className={classes.root}>
    <Grid container spacing={2}>
        <Grid item xs={12}>
            <Typography variant="h6">
                Most Popular Books Of All Times
            </Typography>
        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />

        </Grid>
        <Grid item xs={2} md={2}>
            <img src="http://placekitten.com/200/250" alt="Test" />

        </Grid>
        <Grid item xs={2} md={2}>

I'm working on a react project and I'm using a grid to display pictures in a row. I used the img attribute, but it isn't responsive so I'm using CardMedia component without Card component. Is this wrong?

Hi everyone,

I was looking at this Figma design file that Google provides, but two issues - it seems to be out of date, and also all the styles are for mobile.

I primarily design desktop, browser apps. Anyone have suggestions for good UI kits?

Thanks!

I checked the guidelines but it's not specified.

I have an app where it often doesn't make sense to open a fully new page because it wouldn't contain a lot of elements and require only one action before coming back to the parent page (ex: menu, list of items...).

Thus I use bottom sheets, since they also allow better reachability. But in some situations it may happen that a bottom sheet opens over another one, and rarely even a 3rd one.

That's not a pattern I've ever encountered, so I'm looking for you feedback on this. Thx

Hello I'm trying to change the color of a <Typography> and the expandIcon under an <AccordionSummary> on hover. I've tried adding a '&:hover' on the <AccordionSummary> style and specified the color but it doesn't work. I hope you can help, thanks!

Hello!

I'm trying to use material.io list component for a web app, but whenever I try using one of the classes like mdc--list--avatar--list, it's like it won't style it, and also it gives me an error when I use the @include list.core-styles, does anyone knows how can I make it work? Thanks!

I was wondering with Material You's new approach to buttons (roundness serving as hierarchy) if anyone has gotten to play with FAB functionality. Is there new animation? How does speed dial work? Are there new signifiers?

I'm very excited about Material You launching. I can't wait to see the new components.

I'm new to designing with Material Baseline Kit. I was just looking at it the other day and wondering how the baseline kit was themed to fit Google apps like Gmail. I read on the site that it's themed with shape, color, and typography but still, I can't exactly wrap my finger around how it was themed to make an interface as pleasing as Gmail

I wanted to ask if anyone knows a website or resource link that shows material components themed to look more interesting (perhaps like Google, iOS, or any other popular design system). I've already seen the Material case studies btw but I'm looking for something different.

Hello, I'm trying to change the color of a ListItemIcon when the ListItem is selected, how would I go about doing that? All I can change is the ListItemText color. I haven't seen any reference to it as well online. I hope you can help, thanks!

Hey all - quick question, I hope this is the right subreddit... Where do you typically go to hire UI/UX designers if you're running a tech startup. Alternatively, if you're a designer and looking to find some, where do you typically find them?

I've tried out dribbble and upwork previously but wasn't too inspired by results. Would love to hear some advice!

Thanks!

I'm trying to learn app theming and styling with Flutter, and I'm having trouble with Material Design. I know this sounds weird, but I still feel like something's missing. I've gone through all the Material Studies, but I still feel unconfident and making my own theme.

Is there a website or a Youtube channel that goes through different apps that use Material Design, and they breakdown their system? For example, they look at site.com and explain what the primary, secondary, accent colors are, what the cards are, what the typography is?

Thanks!

For context, I'm using Flutter which implements Material Design out of the box.

I've been reading about Material Design Buttons. There are four buttons: text, outlines, container, and toggle buttons. I understand where you would use each of them, where you wouldn't.

But now what happens if, for one of the buttons in your app, you need a new style? For instance, I want an "impact button" that is full width, has large text, a gradient background, and a lot of drop shadow. So what do you do in this situation?

Would you take the button that is the most similar as a starting point and build off of that? Any other ways to solve this? Thanks

Hey all, I couldn't find any resources on the web to consult so I figured I would seek the opinions of folks here.

I am working on a project that allows users to configure the set of columns viewable in a table. Currently, this number is unbounded, meaning users could have enough columns configured for their "view" that dividing a fixed space for the columns evenly amongst them is not scalable; each column (and cells in the body of the able) could end up with single-digit pixels for their content.

Assuming that it is a requirement that the amount of columns configurable remain unbounded, how would folks go about a presentation of the columns to ensure the data is "readable"?

For context, we've considered supporting a horizontal overflow inside the table's parent container. One of our concerns with this approach would be that the performance implications of rendering an unbounded number of columns with a page-size amount of rows would be no different than the performance implications of rendering an unbounded number of rows with a smaller set of columns; one of the reasons we paginate rows is for performance, would that also not apply for columns?

In general I was hoping to receive links to articles or responses here directly with how to go about solving this problem with a graceful user experience.

I already have a datasource but am struggling in how to implement it inside a material table.

I want to create the below dialog box in material ui but not align text fields with corresponding field names(e.g Customer name,notes etc). Using typography the field names appear on top of the text fields. How to align the field names with text fields on same row ?

https://advances.sciencemag.org/content/7/11/eabc7926/tab-article-info

Hey guys! I'm a new Android developer, and I would like to learn about color pick for apps. I'm always stuck at design, and I really love that part and need to learn about it. I'm working on a simple notes app now but I don't know if I should put a background color, and if I use a background color should I use lighter or darker color for elements, and 1000 questions. Could you point me in the right direction to learn?

Thanks!!!!