material-ui

问题 I'd like to create a reusable component using Material-UI's api (not using styled-components.) I got this far - and it almost works - but the settings that use theme variable don't work (e.g, bgcolor and padding). Am I doing something wrong - or is this not possible? const BigPanel = styled(Box)({ display: 'flex', width: '100%', flexgrow: 1, bgcolor: 'background.paper', borderRadius: 10, boxShadow:'1', p:{ xs: 4, md: 8 } }); 回答1: The object passed to styled is intended to be CSS properties,

问题 I'd like to create a reusable component using Material-UI's api (not using styled-components.) I got this far - and it almost works - but the settings that use theme variable don't work (e.g, bgcolor and padding). Am I doing something wrong - or is this not possible? const BigPanel = styled(Box)({ display: 'flex', width: '100%', flexgrow: 1, bgcolor: 'background.paper', borderRadius: 10, boxShadow:'1', p:{ xs: 4, md: 8 } }); 回答1: The object passed to styled is intended to be CSS properties,

问题 I've been trying to understand and write code on the Box component in material-UI. (https://material-ui.com/components/box/#box) I've been trying to override a Button component the two ways it describes in the documentation, but I have no idea how. When I run the code segment using both methods, the button appears but no color change. Then when I try to add an extra Button underneath the clone element code segment I get an error saying 'Cannot read property 'className' of undefined'. <Box

问题 I have a textfield variant outlined , and there I have a dynamic label, the problem is that when it changes the top line in width remains the same as the first time <TextField id="debtorIin" name="debtorIin" label={debtorType === "pvt" ? "Ф.И.О.:" : "Наименование организации:"} disabled={debtorFullInfo && true} className={classes.textField} value={debtorIin} helperText={touched.debtorIin ? errors.debtorIin : ""} error={touched.debtorIin && Boolean(errors.debtorIin)} onChange={change.bind(null

问题 I am using React 16.4.1 and metrial-ui 4.1.1 and when i tried to run it locally i am getting the following Error. TypeError: _react.default.memo is not a function createSvgIcon c:/apps/projects/app/node_modules/@material-ui/icons/utils/createSvgIcon.js:17 14 | var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon")); And the node and npm versions i have locally (on windows) are 10.16.0 and 6.9.0 When i build the same using Jenkins (running on linux) with node 10.13.0 and

问题 I have this piece of code that calls a web service and displays the names coming from that WS into a Dropdown component from Material UI, What I want to do is to set the default value of the dropdown with the first element coming from the WS and also be able to select any of the options in dropdown, I read something about " State " but don't get it really good at a code level. I'm new to React and learning by myself but some help would be nice. import React, { Component } from 'react'; import

问题 I have this piece of code that calls a web service and displays the names coming from that WS into a Dropdown component from Material UI, What I want to do is to set the default value of the dropdown with the first element coming from the WS and also be able to select any of the options in dropdown, I read something about " State " but don't get it really good at a code level. I'm new to React and learning by myself but some help would be nice. import React, { Component } from 'react'; import

问题 I have this piece of code that calls a web service and displays the names coming from that WS into a Dropdown component from Material UI, What I want to do is to set the default value of the dropdown with the first element coming from the WS and also be able to select any of the options in dropdown, I read something about " State " but don't get it really good at a code level. I'm new to React and learning by myself but some help would be nice. import React, { Component } from 'react'; import

问题 I use materiel-UI icon <ArrowRightAlt/> I can control the size of the icon by fontSize <ArrowRightAlt fontSize="large" /> But I want v size to depend on window size (like md,xs,sm) Can this be done? 回答1: Below is one way of doing this using Box. I'm changing color in addition to font-size just to make it easier to tell which breakpoint it is at. import React from "react"; import ArrowRightAlt from "@material-ui/icons/ArrowRightAlt"; import Box from "@material-ui/core/Box"; export default

问题 Focused, checked classes seems to not work properly. I need to always use !important or use jss styles provided by material-ui. For example: https://codesandbox.io/s/css-modules-nvy8s?file=/src/CssModulesButton.js CssModulesButton.module.css .checkboxtest { color: blue; } .checkboxtestworking { color: blue !important; } CssModulesButton.js import React from "react"; // webpack, parcel or else will inject the CSS into the page import styles from "./CssModulesButton.module.css"; import Checkbox