material-ui

问题 When trying to use ezymes mount on a component that is rendering MaterialUI's Tooltip, there is an error stopping my tests: TypeError: document.createRange is not a function 回答1: To fix this I defined document.createRange in my ./src/setupTest.js if (global.document) document.createRange = () => ({ setStart: () => {}, setEnd: () => {}, commonAncestorContainer: { nodeName: "BODY", ownerDocument: document, }, }) 来源： https://stackoverflow.com/questions/51887552/jest-enzyme-document-createrange

问题 I am integrating material ui time picker I need to change the color of time You can see in the image. I need to change the color of 11:30 pm I searched a lot but couldn't able do it. Please help!!! EDIT: I tried this const theme = createMuiTheme({ palette: { primary: { main: '#efbb40' } }, typography: { useNextVariants: true, suppressDeprecationWarnings: true } }) 来源： https://stackoverflow.com/questions/53391633/material-ui-time-picker-header-text-color

问题 I have a Menu with Material-UI , why is the whole screen width used? How can I limit to use only the text length needed space? I tried to put div element around MenuList but it did not help. class MainPage extends React.Component { render() { return ( <div> <MenuList> <MenuItem>Profile</MenuItem> <MenuItem>My account</MenuItem> <MenuItem>Logout</MenuItem> </MenuList> 回答1: Use ThemeProvider, and override the MuiList-root width: import { createMuiTheme } from '@material-ui/core/styles'; import

问题 I'm using the DatePicker component of materialui and I need to get the value of two DatePicker components in one function to make a range. I created a handleChange function that already allows to retrieve the value of a DatePicker component but for 2 component I can not do it. I would like to know the steps I need to take. this is my code : import React from 'react'; import moment from 'moment'; import 'moment/locale/fr' import DatePicker from 'material-ui/DatePicker'; import

问题 I have a <ListSubheader className={this.props.classes.listSubHeaderRoot}>Teszt Színház</ListSubheader> in a List . And set style like: const styles = theme => ({ // ... listSubHeaderRoot: { backgroundColor: '#E5E5E5', color: '#252525', height: '22px' /* To change the font, use the fontFamily rule */ } }) but result looks like: Why text is out of the grace box? How can I prevent it? Here the whole code: import React, { Component } from "react"; import List from '@material-ui/core/List'; import

问题 Note: I already looked into this question: Cant remove padding-bottom from Card Content in Material UI But the accepted answer did not fix my issue. I am using the Material UI React Library attempting to recreate the below image: I am completely new to using the Material UI, so most of my code will likely not be optimized and probably does not follow best practices. Indeed, I'd be interested to hear how it could be made better. Here is my code thus far: <Card className={classes.card}>

问题 How can I access to inner css classes of children of a component and add or change styles to/of them? like I want to change and customize material ui stepper steps circle font size and color and so on. How can I write css classes like bellow: .stepper circle { font-size:18px; } or .stepper .text { font-size:18px; } thanks. 回答1: The very straightforward way to do it without having to worry about classes is by using the material-ui style prop. Like so, <Stepper style={{ fontSize: '18px' }} />

问题 I am in the process of moving my application to Material UI V4 and I am struggling to move my react router Link components into forwardRef wrapped components when the 'to' prop is set programmatically. The below code works but requires duplicating the call to forwardRef and building the props object and I would prefer to do that work in a function that is called once with arguments but I cannot work out how to do it. const ViewLink = (props, ref) => { console.log(props); switch (props.type) {

问题 Hi I am trying to call the method from parent component to child. I have researched lot i didn't get any good solution with child(functional component). if there is a solution can any explain me to solve this. APP.js import React from 'react'; import IntegrationDownshift from './members' class App extends React.Component { constructor(props) { super(props); this.state = { Name: "Name from state...", Description: "Description from state...", Data:[data] } } Clear(){ this.IntegrationDownshift

问题 Looking for a way to have material-ui's tooltip expand the text in a table cell ONLY if the text is cut off with an ellipsis (overflowing). Currently in my table I have a cell like this: <TableCell className={classes.descriptionCell}>{row.description}</TableCell> and my styling for descriptionCell is like this: descriptionCell: { whiteSpace: 'nowrap', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis' } This makes the text behave the way I would like it to in this table, but I