material-ui

问题 So I have text field with a a child select who in turn has a child menu like so: <Tooltip title={ features.length > 1 ? features .map((feat) => FeatureOptions.find((f) => f.value === feat).label) .join(", ") : "" } placement="'bottom-start'" > <TextField label="ML Features" variant="outlined" margin="dense" select multiple fullWidth InputLabelProps={{ shrink: true, margin: "dense" }} SelectProps={{ multiple: true, value: features, displayEmpty: true, renderValue: (features) => features.length

问题 I cannot figure out how to call fitBounds() on the Leaflet map. Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.). i also saw some example How do you call fitBounds() when using leaflet-react? and i tried to implement but it did not work. Here is my code that i tried. import React, { createRef, Component } from "react"; import { Map, TileLayer, Marker, Popup } from "react-leaflet"; import L from "leaflet";

问题 I'm trying to get a data from an REST endpoint through axios and then render them in my app.js component and after that provide them to the whole app by using context API: axios.js import axios from 'axios'; const instance = axios.create({ baseURL: 'api_endpoint' }); export default instance; app.js import Context from './context' class App extends Component { constructor(props) { super(props) this.state = { comp: [] } }; async componentDidMount() { await instance.get('') .then(res => { const

问题 I have this simple code to show the text field: I get the error Error in /turbo_modules/react@16.13.0/cjs/react.development.js (1465:13) Invalid hook call. The code is at this link https://stackblitz.com/edit/react-6dgvfj?file=UserForm.js import React, { Component } from 'react'; import compose from 'recompose/compose'; import { connect } from 'react-redux'; import TextField from '@material-ui/core/TextField'; const UserForm = props => { return ( <div> This is userform component. <TextField

问题 The displayed date in Material UI Pickers is 1 day behind the selected date: I selected 25th, the value in formik is 25th but the value displayed on the form is 24th. "@date-io/date-fns": "^1.3.13", "date-fns": "^2.9.0", import DateFnsUtils from '@date-io/date-fns'; import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers'; import { format, addDays } from 'date-fns'; <MuiPickersUtilsProvider utils={DateFnsUtils}> <FastField as={DatePicker} variant="inline" disableToolbar name

问题 I want to test a simple Material UI select form which uses a FormControl and is exported withStyles. My Test case is pretty simple, i want to assert for example that my component renders an child. I try the following assertion: expect(wrapper.find('InputLabel')).toEqual(true); However, this assertion fails simply because the InputLabel is wrapped inside WithStyles AND WithFromControlContext (see debug output) : <WithStyles(FormControl) id="my-control-id"> <WithStyles(WithFormControlContext

问题 I am trying to handle a table where I should have 2 rows in the header. Each cell in the first header should have children's in the second row (in the header ). My design so far doesn't clearly display the data for each column. I need to draw a left border for each column. I am not sure how to do so. Here is my code (CodeSandBox) const useStyles = makeStyles({ table: { minWidth: 650 } }); <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> <TableHead

问题 How do I align icon to the same level as the text. As of now, I see the icon is at little top to the text. I tried to use padding-top: 5px and also margin-top: 5px but that does not seem to work as expected. <Box> <Typography variant="h2"> Photography <FaCamera /> </Typography> </Box> I created a working example using Stackblitz. Could anyone please help? 回答1: You can easily use a Grid to achieve the correct alignment without the need for any CSS. <Grid container alignItems="center" spacing=

问题 I intend to filter data by selecting different checkbox through the following codes: const movieData = [ { title: "movie 0", genre: "" }, { title: "movie 1", genre: ["action", "thriller"] }, { title: "movie 2", genre: ["comedy", "drama"] }, { title: "movie 3", genre: ["comedy", "action"] }, { title: "movie 4", genre: "thriller" }, { title: "movie 5", genre: "comedy" }, { title: "movie 6", genre: "action" }, { title: "movie 7", genre: "drama" } ]; const movie = [ { genre: "thriller" }, { genre

问题 I have designed a side nav bar but floating button along with text are not working. floating button css is not working as expected. Also I am facing some issue with round circle image. Its always come as oval shape even if I am using circle class. attaching the view as image. Side Nav Bar html: <ul id="slide-out" class="side-nav fixed invesible-top "> <li> <div class="user-view"> <div class="background"> <img src=""> </div> <a href="#user"><img class="circle" src=""></a> <a href="#name"><span