material-ui

Material-UI Button and ButtonGroup do not align on the baseline

由 倾然丶 夕夏残阳落幕 提交于 2020-06-01 05:52:25
问题 Can someone explain why Button and ButtonGroup do not align on the baseline in the example below? Is there a property I can change on the ButtonGroup element to make them align? <!DOCTYPE html> <html lang="en"> <head> <title>My page</title> <meta charset="utf-8" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react

Material-UI Select e.target.value is undefined

由 帅比萌擦擦* 提交于 2020-05-31 07:22:51
问题 I'm using Material-UI's Select component in one of my React projects. I require the dropdown data to be shown in groups, hence I'm using <MenuItem> wrapped around <ListSubheader> . I'm having a hard time getting the value of my MenuItem s. Please let me know if there's anything blatantly wrong with my code. <FormControl> <InputLabel>Product type</InputLabel> <Select id="product-type" input={<Input id="grouped-select" />} value={this.state.productType} autoWidth={true} style={{ width: 200 }}

How to add linear-gradient color to Slider?

由 ╄→гoц情女王★ 提交于 2020-05-31 06:18:53
问题 I want to add linear-gradient to Material-UI Slider as color. Is it possible? I try everything. color: 'linear-gradient(180deg, #29ABE2 0%, #00EAA6 100%)' 回答1: linear-gradient creates an image not a color. So you need to use it in CSS that specifies an image (e.g. background-image ). Below is an example of a Slider using a gradient. import React from "react"; import { makeStyles, withStyles } from "@material-ui/core/styles"; import Slider from "@material-ui/core/Slider"; const useStyles =

Remove / Override default styles from materialui components

由 心不动则不痛 提交于 2020-05-30 03:37:26
问题 I'm trying to change the background color of the menuitem popover. But I am unable to remove paddingtop and paddingBottom from menuitem. It's kind of annoying because some materialui components inherit styles from paper, list, menu and etc. Is there a clean and efficient way to work around this? For eg, using overrides in theme and etc. I have experiment and I know it can be done using inline styles/classes but i do not wish to use that method. I've tried using ListProps={{disablePadding:

React: Slider with custom hook not working properly

由 坚强是说给别人听的谎言 提交于 2020-05-29 10:32:21
问题 I am trying to create a custom hook with a slider ui element. My goal is to be able to access the slider value from the parent element so as to update some other ui parts. However, it seems that the slider values do not update correctly: when the user tries to drag the slider tooltip it only moves one step. It seems like the mouse events stop being tracked after useEffect gets called. What can I do to fix this and have a smooth dragging behaviour? Here is my code (sandbox): index.js import

React: Slider with custom hook not working properly

由 六月ゝ 毕业季﹏ 提交于 2020-05-29 10:31:26
问题 I am trying to create a custom hook with a slider ui element. My goal is to be able to access the slider value from the parent element so as to update some other ui parts. However, it seems that the slider values do not update correctly: when the user tries to drag the slider tooltip it only moves one step. It seems like the mouse events stop being tracked after useEffect gets called. What can I do to fix this and have a smooth dragging behaviour? Here is my code (sandbox): index.js import

Is it possible to save the order of the column of material table to a database to keep it persistent?

由 末鹿安然 提交于 2020-05-29 09:44:22
问题 I want my users to be able to drag the columns on the material table and keep that state persistent. I can get the states of my columns and their orders at any time. I do save them. However, when I try to render with the saved order of my columns it doesn't seem to update my material table. I'm using react Material-Table from material-table.com Here is the code I'm trying to do: const tableHeaders = []; tableHeaders.push({ title: 'a', field: 'a' }); tableHeaders.push({ title: 'b', field: 'b'

Is it possible to save the order of the column of material table to a database to keep it persistent?

由 隐身守侯 提交于 2020-05-29 09:43:22
问题 I want my users to be able to drag the columns on the material table and keep that state persistent. I can get the states of my columns and their orders at any time. I do save them. However, when I try to render with the saved order of my columns it doesn't seem to update my material table. I'm using react Material-Table from material-table.com Here is the code I'm trying to do: const tableHeaders = []; tableHeaders.push({ title: 'a', field: 'a' }); tableHeaders.push({ title: 'b', field: 'b'

Uncaught TypeError: Cannot read property 'main' of undefined when trying to use React MuiAlert

由 两盒软妹~` 提交于 2020-05-29 08:30:22
问题 I am trying to build a Redux based notificator based on this example: https://material-ui.com/components/snackbars/#CustomizedSnackbars.tsx And here is what I came up with: import { Snackbar } from '@material-ui/core'; import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import React from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { ProgramCategoryActions } from '../../program/store/program-category.actions'; import {

Material UI tooltip doesn't display on custom component, despite spreading props to that component

由 百般思念 提交于 2020-05-29 06:56:33
问题 I am having difficulties making the Material UI tooltip actually appear when hovering over a component. As far as I can tell, I am doing about the simplest implementation of the tooltip component: I import it directly (no custom styles or anything else yet), and I wrap it around another component that spreads out its props at the top level. From reading the documentation it should be that simple, but it is not appearing on hover, and in the React DevTools I see that the anchorEl prop of is
订阅 material-ui