material-ui

问题 Im using Material UI Next in a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. My question is..how to make the whole card clickable? ie. Whether a user presses on the card text, or the card image or the button, it should trigger the onClick event which I call on the button. 回答1: Update for v3 — 29 of August 2018 A specific CardActionArea component has been added to cover specifically this case in

问题 I'm implementing a menu that opens when the user clicks on an Avatar. The problem is that the menu is rendering in a completely different place: The avatar is the green "OB" button on the right. There is no console error and inspecting the Popover element, it's receiving the anchorEl prop: The language menu, on the right of the avatar, renders just fine, opening where it should open. My code seems fine, I'm really not sure why the position is wrong: export function DashboardNavbar({ setDrawer

问题 I've attached a cut down version of an issue I am having. I have a simple Checkbox which I hide using opacity : 0 depending on what is passed into the component containing the Checkbox (in this case MyCheckbox ) MyCheckBox.js import React from "react"; import "./styles.css"; import { Checkbox, makeStyles } from "@material-ui/core"; const useStyles = makeStyles({ checkboxHiddenStyle: { opacity: 0 } }); export default function MyCheckbox(props) { const styles = useStyles(props); return ( <div>

问题 Material UI has a nice set of built-in media queries: https://material-ui.com/customization/breakpoints/#css-media-queries Material UI also allows us to use Styled-Components with Material UI: https://material-ui.com/guides/interoperability/#styled-components I want to know how to combine the two together. That is, how can I make media queries using Styled Components and Material-UI's built-in breakpoints? Thanks. UPDATE: Here is an example of what I am trying to do: import React, { useState

问题 I am trying to dynamically render elements however when I try and splice the component from the array it does not get removed. const [cardsInGrid, setCards] = React.useState([]); const [showReactions, setShowReactions] = React.useState(false); const onReactionsClick = () => { setShowReactions(!showReactions); }; useEffect(() => { if (showReactions) { setCards(cardsInGrid.concat(<Reactions />)); } else if (!showReactions) { console.log(cardsInGrid); var index = cardsInGrid.indexOf(<Reactions /

问题 I've got a unit test using Jest and React Testing Library that fills and submits a form. The problem is that after upgrading Material UI to version 4 my unit test fails to select an option. The error is: "Unable to find an element with the text: Brazil" Brazil is the text option I'm trying to select. Using Material UI version 3 was working just fine. Test Code - Gives error: "Unable to find an element with the text: Brazil." fireEvent.click(getByTestId("id-country")); const countryOption =

问题 Hi there I'm trying to test a Slider component created with Material-UI, but I cannot get my tests to penter link description hereass. I would like test the the value changes using the fireEvent with @testing-library/react . I've been following this post to properly query the DOM, I cannot get the correct DOM nodes. Thanks in advance. <Slider /> component // @format // @flow import * as React from "react"; import styled from "styled-components"; import { Slider as MaterialUISlider } from "

问题 I'm using React Material UI's Tooltip Component in my React application. import Tooltip from "@material-ui/core/Tooltip"; ... ... <Tooltip title="Add" arrow> <Button>Arrow</Button> </Tooltip> ... ... I want to disable the entry and exit animations. How can I achieve this in the latest version 回答1: Just disable/mock the transition component. ie: render automatically the children like this: const FakeTransitionComponent = ({ children }) => children; <Tooltip title="tooltip title"

问题 I want to fire an event onDragStop rather than onChange using a material ui Slider in my React app (so that the event fires fewer times). However, the documentation indicates that the onDragStop function signature only has the mouseevent: function(event: object) => void . So, the following works with onChange : <Slider onChange={ (e, val) => this.props.update(e, control.id, val) } /> However, this event doesn't have a second parameter val : <Slider onDragStop={ (e, val) => this.props.update(e

问题 I'm trying to customize the design (borders, radius border) of the drop-down element of the material-ui select component. The Material UI documentation mentions various properties to override and style the various sub-components, but none for the drop-down itself. The reason for it might be that the drop down renders out of the root component, with position absolute relative to the page. Any idea how I can style the dropdown? Here is a screenshot of the current state of the component: I was