material-ui

问题 Data is stored as: { iso: "gb", label: "United Kingdom", country: "United Kingdom" }, { iso: "fr", label: "France", country: "France" } Value passed to the Autocomplete is: { iso: "gb", label: "United Kingdom", country: "United Kingdom" } Error reported in console Material-UI: the value provided to Autocomplete is invalid. None of the options match with {"label":"United Kingdom","iso":"gb","country":"United Kingdom"} . Type error reported on value={} Type 'string | ICountry' is not assignable

问题 I have a countries array which contains id and name . Currently I am using a Material UI Autocomplete element and I have a react hook form. When I submit the form, I want to fetch the the country Id. Currently it is posting the country name. Is there a way to post the ids instead of the names without going and fetching the id from the name. <Autocomplete className="form-item" options={countries} getOptionLabel={option => option.name} renderInput={params => ( <TextField {...params} inputRef=

问题 I am using Material UI for building my React Project. However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site. My React app's css is getting overridden by the global styles defined in that website. I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website. I saw this question but the solutions didn't help me. 回答1:

问题 I am using Material UI for building my React Project. However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site. My React app's css is getting overridden by the global styles defined in that website. I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website. I saw this question but the solutions didn't help me. 回答1:

问题 I am using Material UI for building my React Project. However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site. My React app's css is getting overridden by the global styles defined in that website. I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website. I saw this question but the solutions didn't help me. 回答1:

问题 I have a Dialog and have a ListItem that when you click on it goes into edit mode by showing a Popover. This was working in an older version of MUI using a Modal but since getting on the latest that didn't work and I'm trying to use a Popover. I tried to make a simple example on CodeSandox but that works. What happens is the Popover is always in the upper left of the page instead of the ListItem. I have simplified my code to a simple Button and Popover in the Dialog and still have the same

问题 I have a Dialog and have a ListItem that when you click on it goes into edit mode by showing a Popover. This was working in an older version of MUI using a Modal but since getting on the latest that didn't work and I'm trying to use a Popover. I tried to make a simple example on CodeSandox but that works. What happens is the Popover is always in the upper left of the page instead of the ListItem. I have simplified my code to a simple Button and Popover in the Dialog and still have the same

问题 I'm using CRA with Material-ui and Styled Components type of styling. When building my CSS I want to access Material-ui's default theme. part of package.json: "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1", "@material-ui/core": "^4.2.1", "@material-ui/icons": "^4.2.1", "@material-ui/styles": "^4.2.1", "styled-components": "^4.3.2" } When I try the below theme exists on props but is an empty object. StyledApp.js: import styled from "styled-components";

问题 I'm using CRA with Material-ui and Styled Components type of styling. When building my CSS I want to access Material-ui's default theme. part of package.json: "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1", "@material-ui/core": "^4.2.1", "@material-ui/icons": "^4.2.1", "@material-ui/styles": "^4.2.1", "styled-components": "^4.3.2" } When I try the below theme exists on props but is an empty object. StyledApp.js: import styled from "styled-components";

问题 Styles appear for maybe 50ms and disappear in the below code in this SSR app. I'm curious what could be causing that. // This component is a child of index.tsx in the /pages folder <Button color="primary" variant="outlined" size="large" >Test Button</Button> After the styles disappear a plain HTML button is left. I believe Next.js is causing this. I checked the Next.js file and have added the next/babel loader to .babelrc. Other than that I only saw this other relevant change. This is in