material-ui

问题 I've built a form in React using MUI and React Hook Form. I'm trying to create a custom TextField element that works as a Select Input . I would like it to be an uncontrolled component with a Ref prop. I've tried to pass the inputRef prop as the MUI and React Hook Form docs recommend but with no success. <TextField id="id" name="name" select native="true" className={classes.textField} label="label" margin="normal" variant="outlined" inputRef={register({ required: "Choose one option" })} error

问题 I'm trying to convert this functional component to class based component. I have tried for several hours but could not find where to place these const variables in component. If someone could write it out in class based component it will highly appreciated. const useStyles = makeStyles(theme => ({ typography: { padding: theme.spacing(2), }, })); function SimplePopper() { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); function handleClick(event) {

问题 I'm using Material-Ui in my React Project ! i followed the steps in the documentation to allow RTL in my project and all work fine ! except the TextField Component LTR DIRECTION : RTL DIRECTION Like you see ! the problem is with the label still in left ( the input text work fine ) App.js file import React, {useState} from 'react'; //i18n import {withTranslation} from "react-i18next"; import './i18n'; //jss import { create } from 'jss'; import rtl from 'jss-rtl'; import { StylesProvider,

问题 const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); Is there a way to use CSS @media at the above variable? if impossible, how can I make my custom css for responsive? 回答1: Below is an example showing two ways of specifying media queries within makeStyles . You can use up , down , only , and between functions in theme.breakpoints (which

问题 const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); Is there a way to use CSS @media at the above variable? if impossible, how can I make my custom css for responsive? 回答1: Below is an example showing two ways of specifying media queries within makeStyles . You can use up , down , only , and between functions in theme.breakpoints (which

问题 Can't get 'selected' or 'hover colors to work for ListItem. For selected tried setting its classes like: <ListItem selected button key="home" classes={{ selected: classes.listItemSelected }} > <ListItemText primary="Hi"/> /ListItem> and then setting the style like: const useStyles = makeStyles((theme) => ({ listItemSelected:{ backgroundColor: "#ff0000", }, })); But it doesnt do anything, the 'selected' is described in the ListItem component API here: https://material-ui.com/api/list-item/ How

问题 Can't get 'selected' or 'hover colors to work for ListItem. For selected tried setting its classes like: <ListItem selected button key="home" classes={{ selected: classes.listItemSelected }} > <ListItemText primary="Hi"/> /ListItem> and then setting the style like: const useStyles = makeStyles((theme) => ({ listItemSelected:{ backgroundColor: "#ff0000", }, })); But it doesnt do anything, the 'selected' is described in the ListItem component API here: https://material-ui.com/api/list-item/ How

问题 I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces. Currently, When I reduce my screen last column is shirking first which looks bit odd as other groups are still having equal size. Is there anyway we can support same column size for "total settlement amount"even screen size reduces? Below is my stackblitz https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts Image Updated 回答1: Thanks for

问题 I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces. Currently, When I reduce my screen last column is shirking first which looks bit odd as other groups are still having equal size. Is there anyway we can support same column size for "total settlement amount"even screen size reduces? Below is my stackblitz https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts Image Updated 回答1: Thanks for

问题 I'm using the Material Table library that is officially recommended by Google Material UI as a data table library and having troubles with configuring the width of columns. Column width property is working until our content fits the cell: CodeSandbox Is there any solution to fix that? 回答1: If you want to set specific width to each column, I believe that you need to specify the option tableLayout: fixed . The docs refers to it like this: tableLayout | auto or fixed | To make columns width