material-ui

问题 This is my sample code in React.js. I want to use an array distances from Constants.js in Main.js . In particular, the column APT in sampleData should be substituted by an appropriate value from an array distances taken from Constants.js . Thus, after clicking on the button Load data , the object csvData should finally look as follows: NUM,APT,COST 1,483,20 2,5777,25 3,5777,15 Constants.js export const distances = [ {label:"KJFK",value:5777}, {label:"ERTE",value:483} ] Main.js import React, {

问题 Material UI Tabs has stopped working... It must have been after an update as it's not working at all now. It could have been caused by the recent update to react-tap-event-plugin I made. Initially, I thought it was because of my tab indexing but it doesn't work with the a,b,c values too e.g. value='a' , value='b' , etc. I have even tried it with a stripped out version as a clean new component like so: //imports //'use strict'; import * as React from 'react'; import { Button, PrimaryButton,

问题 I need to design a header like below-attached image. Can I able to design this using react-native elements or material-ui. Here the profile name may be the lengthiest name or short name. But needs to work and start from that place. Can anyone suggest a good solution? Note: I have used react-native-elements (Header) but it not worked for me as expected 回答1: You can design completely custom Header with React navigation. By setting header height in navigationOptions import React from 'react';

问题 I am using react-admin and I am using their Create component that use TextField from @material-ui/core . Of course I have read the documentation here I would like to completely customize the render for a custom view, this is how look the generated html: <div class="create-page Component-root-55" notification=""> <div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53"> <form class="simple-form" locale="en"> <div class=

问题 Previous question I have codes below to let the height of my component change according to the window size. It works when it is reloaded , but I am not sure how to reflect the value in real time. How do I do that? Before window size changed After window size changed The number is changed but the grid height (with brown background) is still same. // WindowSizeManager.tsx import React, { createContext, useContext, ReactNode } from 'react'; import { useWindowSize } from 'react-use'; interface

问题 My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/): /* eslint-disable no-unused-vars */ import React, { PureComponent, Fragment } from 'react'; import Head from 'next/head'; import compose from 'recompose/compose'; import Layout from '../components/Layout'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const styles = { root: { textAlign: 'center', paddingTop: 200, }, p: { textTransform:

问题 I keep running into trouble in trying to use Material UI. I have a Material UI table. I'm trying to centre align the text. The Material UI standard CSS has an element called: MuiTableCell-root-60. That has a attribute with text-align: left. I can't find a way to override that setting. The table doesn't use an element with that name in an exposed way. I can't find a way to put a centre aligned selector on the table. how do you modify standard Material UI CSS attributes? I've tried various

问题 I am trying to have a fixed header where on the right side should be tabs. The <Toolbar /> component is responsible for the responsiveness of the block but doesn't allow for stretched tabs so easily. https://codesandbox.io/s/jv8v6vwqpv 回答1: The problem is that the Toolbar responsively changes its height and the Tabs and Tab component do not (Tabs sets a min-height of 48px in its root class, Tab sets a height in its root class). Fortunately, the behavior Toolbar uses is available in a theme

问题 I have a simple file upload utility, for which I am using react-dropzone, and in conjunction to that I wanted to use material-ui LinearProgress bar to show the progress. Shown below is the component I created which renders the file upload utility along with the LinearProgress bar. I am using superagent library for the actual upload of the back to the backend using multipart formdata. The superagent's request allows a callback or an event handler for upload progress. In my code, the progress

问题 We want to use the material ui next components in our application where we're using styled components with SASS. To achieve this we use webpack and a raw-loader to import the generated CSS and apply the styles like so: const sidebarStyles = require('./Sidebar.sass'); const StyledDrawer = styled(Drawer)` ${sidebarStyles} ` We're trying this approach because styled components seem like a good method for styling react components, but we want to use regular sass files so our designers can create