material-ui

问题 I'm trying to use Material UI table pagination to display 5 rows per page, but it shows all items on page and does not change pages. Cant find out where I'm making mistake. I have recreated my problem in sandbox, could you please check it : https://codesandbox.io/s/magical-davinci-t2nq7 state = { rowsPerPage: 5, page: 0 }; handleChangePage = (event, page) => { this.setState({ page }); }; handleChangeRowsPerPage = event => { this.setState({ rowsPerPage: event.target.value }); };

问题 I'm using react material-table and want a decent scroll-bar instead of default Pagination. I have tried react-custom-scroll but it's not working as per my intention. The default scroll-bar of my App is activated. One more thing, how can I just apply this type of scroll on just the table body? import CustomScroll from 'react-custom-scroll'; . . . <div style={{height:"50vh"}}> <CustomScroll heightRelativeToParent="100%"> <MaterialTable . . options={{ search: true, paging: false,

问题 I'm trying to style my card so that it's not so big but the problem is every time I do that, my TextField loses its' functionality and I have to keep on clicking on the TextField because it keeps on losing focus. I need to make my Card component smaller without losing the functionality of my TextField. https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js import React, { useState } from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; import

问题 I'm trying to style my card so that it's not so big but the problem is every time I do that, my TextField loses its' functionality and I have to keep on clicking on the TextField because it keeps on losing focus. I need to make my Card component smaller without losing the functionality of my TextField. https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js import React, { useState } from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; import

问题 I'm using react material-table and want a decent scroll-bar instead of default Pagination. I have tried react-custom-scroll but it's not working as per my intention. The default scroll-bar of my App is activated. One more thing, how can I just apply this type of scroll on just the table body? import CustomScroll from 'react-custom-scroll'; . . . <div style={{height:"50vh"}}> <CustomScroll heightRelativeToParent="100%"> <MaterialTable . . options={{ search: true, paging: false,

问题 I'm trying to get rid of max-width that present in the theme. This is what I see in Chrome (and if I uncheck it, it does what I need): @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I do this? I tried something like this: const useStyles = makeStyles(theme => ({ root: { '& .MuiContainer-maxWidthLg' : { maxWidth: //No matter what I put here, it does not work }, but it does not seem to have any effect... How can I override this? Thanks, Alex 回答1: The maxWidth

问题 I'm trying to get rid of max-width that present in the theme. This is what I see in Chrome (and if I uncheck it, it does what I need): @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I do this? I tried something like this: const useStyles = makeStyles(theme => ({ root: { '& .MuiContainer-maxWidthLg' : { maxWidth: //No matter what I put here, it does not work }, but it does not seem to have any effect... How can I override this? Thanks, Alex 回答1: The maxWidth

问题 So I have AppBar working fine. And I didn't even use sticky for that but I think I need some kind of sticky style to make my element in the page essentially stick at the top when the user scrolls. I essentially want this. https://www.w3schools.com/howto/howto_css_sticky_element.asp But within my React page I want my ProgressBar component to remain at the top. The component below this RenderTeamSelections which is a big table, it will push the ProgressBar out of view quickly. I want to kept

问题 I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox. The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/ I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with

问题 I am developing an app in ReactJS and i'm using the following: MaterialUI (for react) and React Flexbox. The problem i'm having is trying to position the card buttons on bottom (the problem that seems to have spammed the internet in different frameworks). I am using the card from here -> https://material-ui.com/demos/cards/ I've tried pretty much everything i could think of from align-items to align-self and different display types. I might be missing something here since i usually work with