material-ui

问题 I need to set linear-gradient as well as the background image on a specific div using styles in Reactsjs I am able to get either of them, I mean to say either image or linear-gradient but not both at the same time The image is going to overlap with the linear gradient I tried below solution : leftAdArea: { width: 380, height: 580, background: 'url(https://www.mahealthcare.com/assets/images/clinic/NursePhone.jpg) no-repeat , linear-gradient(135deg, #50A684 30%, #115E67 90%)', } Suggest me to

问题 I am working on a NextJS site that has some custom styling that is being applied via MaterialUI's makeStyles. It works fine on the first load and then undoes all of the custom work on the second. It seems that it has something to do with the route as the only time that it works is when I first am directed to the page itself. It is happening on 2 different pages one is being directed via href='/login' and the other is being directed via next/router router.push('/register') I am assuming that

问题 I'm trying to style my TextFields from Material-UI. I have a black background and I need both the textField border and text to be white. Here's my (relevant) code: render() { const styles = { width: { width: '90%', margin: '5px', padding: '5px', textColor: '#ffffff', hintColor: '#ffffff', floatingLabelColor: '#ffffff', disabledTextColor: '#673ab7', focusColor: '#c2185b', borderColor: '#ffffff' }, button: { margin: '15px', padding: '20px', width: '60%' } }; <TextField className="classes

问题 Is it possible to style Material-UI without using the makeStyles feature, for example, css? Just trying to understand how Material-UI style works. The red style on the bottom is the style I'm trying to achieve with simple css here. 回答1: Below is an example of how to customize the various colors in an outlined select using simple CSS. styles.css .customSelect { width: 200px; } .customSelect .MuiInputLabel-root { color: red; } .customSelect .MuiInputBase-input { color: green; } .customSelect

问题 I'm having some issues when using shortid or any other unique uid generator. The moment I use shortid.generate() as key in a table, the anchor point of my Material UI Popover is thrown to its default position rather than appearing where the button is. Here's a sandbox! - try removing/adding back shortid.generate() from line 72. I even tried uniqueId from lodash and the same thing happens - not using a key does render the dialog on the right place though. I even changed versions of Material UI

问题 The Material-UI Box component allows us to reference other components as follows: import Button from "@material-ui/core/Button"; import Box from "@material-ui/core/Box"; const NewButton = ({ children }) => ( <Box compoment={Button} px={3} py={1} color="white" bgcolor="primary.dark"> {children} </Box> ) This works just as I want it to. However, let me now try it with the Drawer component: import Drawer from "@material-ui/core/Drawer"; import Box from "@material-ui/core/Box"; const NewDrawer =

问题 Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered. Thanks in advance! 回答1: You can create styles and pass it through classes prop. Here is an example of how you could do that. import React from 'react'; import { makeStyles, Dialog } from '@material-ui/core'; const useStyles = makeStyles({ dialog: { position: 'absolute', left: 10, top: 50 } }); function Example() { const classes = useStyles(); return ( <Dialog

问题 I'm using a React/MUI Popover inside a react-window List element and am unable to get the Popover to position correctly -- it always winds up in the top left corner of the window (the component is unable to perform a getBoundingClientRctd() on the anchor element [ anchorEl in the docs]). So to get around that problem temporarily, I decided to use the anchorPosition parameter which allows to set an absolute position -- in my case, just the middle of the window. That's not working either. I've

问题 I'm using a React/MUI Popover inside a react-window List element and am unable to get the Popover to position correctly -- it always winds up in the top left corner of the window (the component is unable to perform a getBoundingClientRctd() on the anchor element [ anchorEl in the docs]). So to get around that problem temporarily, I decided to use the anchorPosition parameter which allows to set an absolute position -- in my case, just the middle of the window. That's not working either. I've

问题 I am using Material-UI for the first time and trying to implement Snackbar on success of an API post. I want the Snackbar to slide up onEnter and then slide down onExit. I was able to implement slide up onEnter but need help for "Slide down onExit". Can anyone help me? import React, { useState } from "react"; import Snackbar from "@material-ui/core/Snackbar"; import Slide from "@material-ui/core/Slide"; const [openSnackBar, setOpenSnackBar] = useState(false); const renderSnackbar = () => {