What prop one need to use to specify selected row?

I have created a folder in views directory and created a file named crd.jsx.Then I have added following url object in dashboardRoutes array
{ path: "/card", sidebarName: "cardexample", navbarName: "Material Card", icon: Dashboard, component: CardBasic1 }
crd.txt
after going to the url I am also getting the vertical navbar , search option ,notification icon.But i am not understanding why r they appearing.....In my crd.jsx which function is responsible for loading these components....

Hi,
Thanks for the awesome templates.
I was fiddling around with the template and discovered that removing the search components from HeaderLinks.jsx messes up the layout of the headerlinks.

It appears the CustomInput marginTop class is responsible for the positioning of the entire HeaderLinks section of the template

Hi,

I followed the quick start and terminal commands instructions from the Readme and am getting a failed to compile error due modules being unable to resolve. When I change the import statements to use relative paths the modules do resolve:

For example, with absolute path:
import "assets/css/material-dashboard-react.css?v=1.2.0"; // Compile Error

Changing to relative path:
import "./assets/css/material-dashboard-react.css?v=1.2.0"; // Module is resolved properly

I saw the .env file does specify the NODE_PATH environment variable, but cannot get absolute paths to work on import statements;

Thanks!

I'm struggling to deploy even the free version of this template. I wanted to experiment with the free version before I purchased the Pro version, but I'm stuck on the free version so far :(

Here are the steps:

1. Download the template, unzip folder
2. Run npm install
3. Run npm start --> everything works fine
4. Run npm run build. This creates a build folder.
5. Deploy build folder to Firebase Hosting.
6. When I navigate to the URL I deployed to, I see the following error:

Uncaught SyntaxError: Unexpected token <: main.2eeed198.js:1 What's weird is that the linked JS
file is not a JS file but actually an HTML file. Any idea how to fix it? I haven't made any modifications, this is all on the basic template!

Is there a way to set the variable data in the dashboard from a sheet or an api call ?

Hi,

@material-ui/core isn't set as a peer dependency, which (I think) is causing me the first issue here: https://material-ui.com/getting-started/faq/
"You accidentally bundle two versions of Material-UI. You might have a dependency not correctly setting Material-UI as a peer dependency."

This might be able to help with:
#28 #17

I'm testing out this version before hopefully buying the paid one. I can't see a quick easy way to integrate it into an existing project though. For maintainability, portability, updates, etc, I don't want to mix your components with mine and I need to be able to put your src folder anywhere in my tree. It seems like every instance of something like:

import buttonStyle from "assets/jss/material-dashboard-react/components/buttonStyle.jsx";

breaks webpack because the paths aren't relative.

How are people integrating this with an existing project? Am I missing something? I don't want to structure my app like yours, I don't want your router, etc. I just want the components and layouts.

Thanks!

Hi I am pretty new with the web development.
I'm wondering why you have "main": "index.js" in your packge.json file while you don't have any index.js under the root directory.
It seems like the entering point of this project is public/index.js
Can anyone help?

See the documenation-part about the typeface from material-ui. It seems that it is not included in this project.

When I add additional Grid containers for extra components e.g. tables/videos, I sometimes get a double scrollbar upon loading. Is this a container overflow issue, and if so where can I fix it? When I use fewer components, it doesn't overflow, but not sure where the constraint is, if any.

Upgraded to "@material-ui/core": "^1.2.0":

As a matter of fact, simply upgrading from 1.0.0-beta.41 to 1.0.0-beta.42 will produce the UI bug.

Hi 👋 ,

I will gather my feedback on the project in this issue. You have done a great job so far! It's opening a new path for Material-UI. I want this project to be an inspiring theme example. I will invest time into it.

• Use prettier? I do think that prettier is starting to be a standard in the JS ecosystem. Using it would ease my code reading experience, most likely the same for other people.
• Missing documentation live website.
• 29,5% compression possible with the src/assets/img folder. I have used imageOptim to get this figure.
• classes.root is equivalent to using className.
  

  material-dashboard-react/src/components/CustomInput/CustomInput.jsx

  Lines 18 to 20 in 88ee446

  	classes={{
  	root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
  	}}

• the classNames() helper can avoid doing brittle class name manipulation.
  

  material-dashboard-react/src/components/CustomInput/CustomInput.jsx

  Line 19 in 88ee446

  root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),

• to be cautious with:
  

  material-dashboard-react/src/components/Cards/TasksCard.jsx

  Lines 5 to 7 in 1e371ad

  	import {
  	BugReport, Code, Cloud
  	} from 'material-ui-icons';

  
  See: https://material-ui-next.com/guides/minimizing-bundle-size/
  It can lead to bundles bloating without tree-shaking. It would be safer to do:

import BugReport from 'material-ui-icons/BugReport';
import Code from 'material-ui-icons/Code';
import Cloud from 'material-ui-icons/Cloud';

• Maybe we can use the spacing={16} property instead of:
  

  material-dashboard-react/src/components/Grid/ItemGrid.jsx

  Line 6 in 8e709ab

  padding: "0 15px !important"

• The global override might not be needed with
  

  material-dashboard-react/src/assets/css/material-dashboard-react.css

  Lines 56 to 67 in e3ad7d5

  	html * {
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	}
  	body {
  	background-color: #EEEEEE;
  	color: #3C4858;
  	margin: 0;
  	font-family: Roboto, Helvetica, Arial, sans-serif;
  	font-weight: 300;
  	line-height: 1.5em;
  	}

  
  https://material-ui-next.com/style/reboot/
• Try using function component over class component where possible, it's lighter.
  

  material-dashboard-react/src/components/Typography/Warning.jsx

  Line 9 in e3ad7d5

  class Warning extends React.Component{

• It seems you are no using the theme in this components. It's not an exhaustive list. I have most likely missed some:

  • material-dashboard-react/src/components/Sidebar/Sidebar.jsx

    Line 102 in e3ad7d5

    export default withStyles(sidebarStyle, { withTheme: true })(Sidebar);

  • material-dashboard-react/src/containers/App/App.jsx

    Line 106 in e3ad7d5

    export default withStyles(appStyle, { withTheme: true })(App);

• You shouldn't need to explicit the prefixes. css-vendor use feature detecting to do it.
  

  material-dashboard-react/src/variables/styles.jsx

  Lines 23 to 29 in e3ad7d5

  	const transition = {
  	WebkitTransition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
  	MozTransition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
  	OTransition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
  	MsTransition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
  	transition: 'all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)',
  	};

• jss-default-unit is making a lot of unit optional
  

  material-dashboard-react/src/variables/styles.jsx

  Line 32 in e3ad7d5

  paddingRight: '15px',

-paddingRight: '15px', 
+paddingRight: 15, 

• Using theme.zIndex.modal + 2 could be more explicit
  

  material-dashboard-react/src/variables/styles.jsx

  Line 191 in e3ad7d5

  zIndex: '1032',

• I was surprised to see all the styles in one file. I like the simplicity it's providing. But to be cautious with the bundle size implication. Right now, it's fine (40kB raw, 26kB minified, 5kb gzipped). However, I don't know if it's going to scale with the pro version. You can consider moving some of the files to the components to take advantage of code splitting between the pages when it starts to be an issue.
• I'm surprised there is no usage of the MuiThemeProvider.
  For instance, setting the primary and secondary colors could have made the style override simpler.

How Can I use all this in my new project using create-react-app?
I want to use the components, How can I import these in another new project?

Hello,

I am working on a project that the primaryColor needs to change per user. I have been looking at this project and for example in Task.jsx I see your passing in an object with different colors like 'checked: 'Tasks-checked-407"'. How can I supply my own custom color here? Is there a better way to change the primaryColor per user?

Thanks

i read this document, but i don't understand "step 2", which file is custom theme config?

Hello there,

Is there some particular reason why Material Dashboard React does not render in Internet Explorer 11 and just gives info that JavaScript needs to be enabled - even if IT IS enabled?

Thank you,
Pawel

i have a problem when running npm run-script build everythings works but when i run serve -s build the style seens to be broken whats the problem with that

so i want to deploy the react app with node js but i can't work with this build there is something i can do about it??

this is how it looks like in development enviroment

hello sir I am not front end developer. i had downloaded your angular bootstrap material template. but when I am trying to use that template in netbeans i am getting error like "InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error" what I suppose to do? please help me to solve this problem or tell me how to user your template in netbeans. thank you

I'm using a header on certain layouts (fashioned after the Header.jsx component). On pages where content is long enough that I've got a scroll bar showing on right - when I open a modal, the header contents shift slightly to the right then shift back when the modal is closed. I'm guessing this has something to due with the scroll bar since it does not happen on shorter pages without scroll bar.

As I am writing this up, I noticed that my scrollbar is much wider (looks like standard scrollbar) than the scrollbar on your demo site so this may also have something to do with that.

For example, using the LoginCard. I can create an onClick event when the form button is clicked but can't figure out how to access the data entered in the text fields (like user email). What I've done so far is use setState in onChange function of formControlProps so I can grab the event but not the data actually entered into the text field.

<CustomInput
                        labelText="First Name.."
                        id="firstname"
                        formControlProps={{
                          fullWidth: true,
                          onChange: () => this.setState({ test: "testing" }),
                        }}```

I used the component from "material-ui", but the style is quite different from the custom style. Can anyone help?

I've been trying to figure out why the Drawer component is rendering the backdrop above my main content.

The login screen is unclickable, and I'm not entirely sure why the main content is sitting below the Drawer component.

I wrote a simple Node.js server to serve files from build folder, yet I open up an empty page. I think a simple server should be included so people have some basic idea how to get started with the built files.

In input compponent, the data came with props . How can i set value in input component and how can i take this value against from input.

I am looking to convert this template to typescript but I did not manage to get it working yet.

I started off with ChartCard.jsx file but I keep getting errors like:

Type '{ card: { display: string; position: string; width: string; margin: string; boxShadow: string; bo...' provides no match for the signature '(theme: Theme): Record<"card" | "cardHeader" | "cardTitle" | "cardContent" | "cardCategory" | "cardStats" | "cardActions" | "cardStatsLink" | "cardStatsIcon" | "orangeCardHeader" | "greenCardHeader" | "redCardHeader" | "blueCardHeader" | "purpleCardHeader" | "warningCardStatsIcon" | "primaryCardStatsIcon" | "dangerCardStatsIcon" | "successCardStatsIcon" | "infoCardStatsIcon" | "roseCardStatsIcon" | "grayCardStatsIcon", CSSProperties>'.

Any ideas?

Thanks,
Nick

Browser displays errors after starting the server with "npm start". Keeps saying "Failed to compile".

Module not found: Can't resolve 'assets/css/material-dashboard-react.css' in '/home/user/Desktop/projects/project-folder/src'

Node/npm versions:
npm version - 5.6.0
Node version - 9.5.0
OS - Linux Mint

Hello,

First, thank you for this awesome repo and work that you guys are doing.

I noticed something like a CSS problem on the Dashboard > Tasks.
When you are hovering the edit or delete icons, the popover that comes out is truncated / below other elements. See this for reference.

This bug is visible at least on Linux/Firefox (59.0.2 64 bits).
I do not see it using Linux/Chromium (65.0.3325.181 64 bits)

Hello, I'm using <StatsCard> as standalone, and I'm getting the <CardHeader> cut in top in Chrome.

When using the CustomInput component defined in CustomInput.jsx I realized that there is no way to set helperText for the text field when there is an error to inform the user. Would it not make more sense to use TextField from material UI instead of Input to make this component more generic?

I am creating header appbar (following the example of Header.jsx). When I increase the number of menu items beyond a certain point (in my case, 7 items), I start to get word wrapping. There is plenty of horizontal open space. I have looked through pagesHeaderStyle.jsx but cannot see anything that would cause this.

I would like to be able to use the full horizontal width.

There is an extra single quote on line 30, character 61 that is breaking the code:

<CustomSkinMap googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE" loadingElement={<div style={{ height: '100%'' }} />} containerElement={<div style={{ height: '100vh' }} />} mapElement={<div style={{ height: '100%' }} />}

You have a CardHeader component that allow a lot of things, but, sometimes I want to add an action at top of card, like a button or iconbutton, currently to do this I need to create a div and use flexbox to set icon on right side and text to left side.

The material-ui lib has that feature at their Card
Code sandbox example: https://codesandbox.io/s/jvm7xqr595

Could you add that on CardHeader component?

Hi! I have an existing project, and I'd really just like to cherry pick components from the dashboard to use (specifically the Timeline). Is there a recommended way to do this?

Hello,
I am seeing the warning below spam the console. Any insights into this? the inkbar seems to be heavily used.

Warning: Material-UI: the key inkbar provided to the classes property is not implemented in Input.
You can only override one of the following: root,formControl,focused,disabled,underline,error,multiline,fullWidth,input,inputMarginDense,inputDisabled,inputMultiline,inputType,inputTypeSearch

I add @font-face into material-dashboard-react.css but after compiling my urls changed to sth else what should i do?

hi there, many thanks for the awesome template has saved us a ton of time.

where would you recommend that we instantiate ApolloProvider and which main element should we "wrap" so we can use Apollo throughout the app/views ?

http://md-react.creative-tim.com/documentation is not working for me.

Missing react-popper dependency in package.json. Also the current implementation is that of "react-popper": "0.10.4". 1.0 has breaking changes.

see...
src/components/Header/HeaderLinks.jsx

Or one need use event handler for each cell passed to tableData prop of Table component?

Hey, so I am trying to add my own icons to the appRoutes cosnt in app.jsx(in variables) however I can't seem to import these icons in any way. Any suggestions on how to use our own icons?
I have them as files in a folder

Issue

Notifications not cleared between page changes, causing React warnings printed in the console:

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Notifications (created by WithStyles(Notifications))
in WithStyles(Notifications) (at notifications.js:8)
in NotificationsPage (created by ComponentRenderer)

Reproduce

1. Navigate to Notifications page.
2. Click on buttons to generate a few notifications.
3. Navigate to Dashboard page.
4. After a second the warning is displayed.

Resolution

1. Notifications.jsx: Add alertTimeout = null member.
2. Notifications.jsx: Add clearAlertTimeout function:

clearAlertTimeout() {
  if (this.alertTimeout !== null) {
    clearTimeout(this.alertTimeout);
  }
}

3. Notifications.jsx: Add componentWillUnmount() function:

componentWillUnmount() {
  this.clearAlertTimeout();
}

4. Notifications.jsx: Update showNotification function:

showNotification(place) {
  var x = [];
  x[place] = true;
  this.setState(x);
  this.clearAlertTimeout();
  this.alertTimeout = setTimeout(
    function() {
      x[place] = false;
      this.setState(x);
    }.bind(this),
    6000
  );
}

HeaderLinks.jsx has a dependency on react-popper, that is not listed in package.json. It could be included as a part of Material-UI, but I'm not sure which version that would be.

Please add react-popper and popper.js to package.json. Also notice, that if you use the latest version of react-popper, then the API has changed, so you will have to replace the <Target> component with the <Reference> component.

If you don't explicitly depend on react-popper, but rather on the one (potentially) bundled with the latest Material-UI, then an npm install loads the new version of react-popper used by Material-UI, and breaks HeaderLinks.jsx because of the new react-popper API.

Thanks for your great works, having fun playing with it.

I have a 2 lists in right area, as one of the lists grows its size, the whole right area have to scroll.

What I want is to keep all contents (2 lists in my case) to fit the screen height either when size grows or even no item in list at all.

I am fairly new to webpack and react in general, but I am wondering if it is at all possible to get material-dashboard-react (or material-dashboard-pro-react) to work in tandem (or under) a Webpack react project.

I have managed to solve most compilation issues (except for google maps), but yet the generated code is far from what it should be. CSS is obviously incomplete and I suspect the resulting JS files are also incomplete.

Is there tutorial or some kind of reference implementation for the Demo or Pro version about how to get this sort of deployment to work correctly? I am attaching my present webpack.config.js and package.json for reference.

I intend to buy the Pro version if I am able to fit it in my project, of course.

Thanks.

Configuration files in https://gist.github.com/mpoli/eaa9dd0d9603e0b0a42a26f89e6a7af4

When running this in my webpack configuration I had this happening:

Warning: Material-UI: the key `rootLabelIcon` provided to the classes property is not implemented in Tab.
You can only override one of the following: root,labelIcon,textColorInherit,textColorPrimary,textColorPrimarySelected,textColorPrimaryDisabled,textColorSecondary,textColorSecondarySelected,textColorSecondaryDisabled,textColorInheritSelected,textColorInheritDisabled,fullWidth,wrapper,labelContainer,label,labelWrapped

Warning: Material-UI: the key `rootInheritSelected` provided to the classes property is not implemented in Tab.
You can only override one of the following: root,labelIcon,textColorInherit,textColorPrimary,textColorPrimarySelected,textColorPrimaryDisabled,textColorSecondary,textColorSecondarySelected,textColorSecondaryDisabled,textColorInheritSelected,textColorInheritDisabled,fullWidth,wrapper,labelContainer,label,labelWrapped

Warning: Material-UI: the key `inkbar` provided to the classes property is not implemented in Input.
You can only override one of the following: root,formControl,focused,disabled,underline,error,multiline,fullWidth,input,inputMarginDense,inputDisabled,inputMultiline,inputType,inputTypeSearch

I don't know why this doesn't happen when running react-scripts start, but looking at the MUI code from beta36 I noticed that the components actually don't have those properties. They are defined inside their .d.ts counterparts, but I don't think that react-scripts are considering those...

Either way, I noticed that those props were actually removed after from the .d.ts so it is better to use the right ones even now.

I'm about to open a PR that will solve this.

Followed the installation instructions, but on npm start this error comes up:

./node_modules/@material-ui/core/ButtonBase/TouchRipple.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'C:\MyApps\material-dashboard-react-v1.4.0\node_modules@material-ui\core\ButtonBase'

Tried the proposed solutions but nothing helped. Installing babel-runtime didn't help either. Anyone else getting this error? How could it be resolved? Thanks!

I think it could be a great update, for the structure and the scalability of this open project :)