creativetimofficial / material-kit-react Goto Github PK
View Code? Open in Web Editor NEWMaterial Kit React free and open source by Creative Tim
Home Page: https://www.creative-tim.com/product/material-kit-react?ref=mkr-readme
Material Kit React free and open source by Creative Tim
Home Page: https://www.creative-tim.com/product/material-kit-react?ref=mkr-readme
I wish to load multiple Cards (like the default ones in LandingPage/TeamSection) like follow :
const ProductCard = (props) => {
const classes = props.classes;
return (
<GridItem xs={12} sm={12} md={4}>
<Card plain>
<GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
<img src={props.item.imgUrl} alt="..." className={imageClasses} />
</GridItem>
<h4 className={classes.cardTitle}>
{props.item.name}
<br />
<small className={classes.smallTitle}>{props.item.seller.name}</small>
</h4>
<CardBody>
<p className={classes.description}>
Quantity: {props.item.quantity}
<br/>
Rate: {props.item.rate}
</p>
</CardBody>
<CardFooter className={classes.justifyCenter}>
<Button
round
color="facebook"
>
BID
</Button>
</CardFooter>
</Card>
</GridItem>
);
}
const ProductGrid = (props) => {
return (
props.products.map((item) =>{
return(
<ProductCard key={item._id} item={item}/>
);
})
);
}
class TeamSection extends React.Component {
constructor(props){
super(props);
this.state = {
items : []
};
this.loadProducts = this.loadProducts.bind(this);
}
componentDidMount(){
this.loadProducts();
}
loadProducts(){
fetch('/api/items',{method: 'GET'}).then(response => response.json()).then(data => {
this.setState({items: data.items});
}).catch(err =>{
console.log(err.message);
});
}
render() {
const { classes } = this.props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
return (
<div className={classes.section}>
<h2 className={classes.title}>Here is our team</h2>
<div>
<GridContainer>
<ProductGrid products={this.state.items} classes={classes} />
</GridContainer>
</div>
</div>
);
}
}
export default withStyles(teamStyle)(TeamSection);
I am not sure of how to use classes
and tried pushing them as props, but it always leads to an error of classes
being undefined in the ProductCard component.
What is the correct way to solve this?
Thanks!
I have tried to start and I have followed the suggestions on https://demos.creative-tim.com/material-kit-react/#/documentation/tutorial. Here is the error I get no matter which suggesstion I follow:
'NODE_PATH' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: NODE_PATH=./src npm-run-all -p watch-css start-js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
is this theme support RTL?, if yes how configure it for RTL support?
in package.json
"dependencies": {
"@material-ui/core": "^1.2.1",
"@material-ui/icons": "^1.1.0",
"material-kit-react": "git+https://github.com/creativetimofficial/material-kit-react.git",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-scripts": "1.1.4"
},
in component
import Button from "material-kit-react/src/components/CustomButtons/Button";
in component.render
<Button type="button" color="primary">Primary</Button>
error is..
Failed to compile.
./node_modules/material-kit-react/src/components/CustomButtons/Button.jsx
Module parse failed: Unexpected token (15:25)
You may need an appropriate loader to handle this file type.
| import buttonStyle from "assets/jss/material-kit-react/components/buttonStyle.jsx";
|
| function RegularButton({ ...props }) {
| const {
| classes,
whats wrong with here?
Quite a few dependencies are missing to get the project to work out of the box
Missing
prop-types
classnames
react-router
Missing and Out of Date
react-popper (also note it must be installed at v0.10.4, the project will not support current 1.0 version)
now we have breaking change
import from "material-ui" changed to "@material-ui/core"
I am refering to these buttons: https://demos.creative-tim.com/material-kit-react/?_ga=2.117141381.2087365620.1533070297-784988714.1532690153#/
Try and click on one of them, drag the mouse away, and watch how it still has the shadow underneath indicating that it is either hovered or focused or both.
Can this be removed? So that the shadow effect disappears when the button is not hovered or focused?
I am trying to use your project into mine but always have the same problems.
classes are undefined.
Debugging I can see that the objects coming for imports (for example: Header) never exists.
Some tip about can solve this?
Thanks.
Hi Team,
The work is really awesome, to use it effectively is there any plan for typescript support?
The following two lines were probably intended to be "popper..." classes, not what they're currently called :)
I'm using the PRO repo.
I'm trying to use the colors defined in variables/colors.scss.
The color variable name is being used in a view, but is not rendering (black is used instead)
This must be a really obvious failure on my part, but I can't see how to use the colors defined in that file, with the sample pages produced. For example, the icon colors in SectionDescription.jsx are specified as bootstrap variable colors. Im trying to change them to use colors defined in colors.scss as shown below.
<InfoArea
title="Multi-Purpose Sections"
description="Putting together a page has never been easier than matching together sections. From team presentation to pricing options, you can easily customise and built your pages."
icon={ViewDay}
iconColor="indigo-400"
vertical={true}
/>
Mac
No errors - just not getting the desired result.
Thanks in advance.
<CustomInput
labelText="Username"
id="username"
name="username"
formControlProps={{
fullWidth: true
}}
onChange={(event) => this.handleChange(event)}
inputProps={{
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor}/>
</InputAdornment>
)
}}
/>
handleChange(e) {
console.log(e);
}
this is my code
everytime i tried type on the input, the event not trigger.
can anyone help me ?
You should not use <Link>
outside a <Router>
material-kit-react/src/components/Header/HeaderLinks.jsx
I'm having trouble to use the route in headerlink, I changed the headerlink component to this
function HeaderLinks({ ...props }) { const { classes } = props; return ( <List className={classes.list}> <ListItem className={classes.listItem}> <Link to="/about" exact> <Button color="transparent" className={classes.navLink} > {props.navLink1} </Button> </Link>
and add the code inside index.jsx
import SectionAbout from "views/Components/Sections/SectionAbout.jsx"; { path: "/about exact", name: "About", component: SectionAbout },
and here's header component inside components views looks like
<Header brand="Novel-ist" rightLinks={<HeaderLinks navLink1="About" />} fixed color="transparent" changeColorOnScroll={{ height: 400, color: "montecarlo" }} {...rest} />
can i put the link inside the header component or is there any way to put the the link in navigation bar?
I am still trying to overcome compile errors for wrong paths so far starting with assets or components. I have had to put ../../ or ../../../ or ../../../../ or ../../../../../ to make them work. There are so many of them I still haven't yet started the app since I downloaded, so I can't wait until all these compile errors are overcome so i can actually see what this app is like.
Am looking for reactJS Horizontal time line and i have checked in this material kit react.
Can any one help me to get UI + ReactJs Horizontal Time Line
I'm trying to create a new install and there is issue with it.
./node_modules/@material-ui/core/ButtonBase/ButtonBase.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in '/Users/a/Projects/nns/node_modules/@material-ui/core/ButtonBase`
Please answer the following questions for yourself before submitting an issue.
After running npm run build
/build
folder should be created with all minified files
npm run build
> [email protected] build E:\github\file-post
> npm run build-css && react-scripts build
> [email protected] build-css E:\github\file-post
> node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/
Wrote 1 CSS files to E:\github\file-post\src\
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/ipfs-api/src/utils/module-config.js:7
Read more here: http://bit.ly/2tRViJ9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run build-css && react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MyName\AppData\Roaming\npm-cache\_logs\2018-09-26T19_34_24_192Z-debug.log
Above mentioned log file
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\github\file-post\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v9.0\libnvvp;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;D:\xampp\php;C:\ProgramData\ComposerSetup\bin;D:\Software Installing\Git\cmd;C:\ProgramData\chocolatey\bin;C:\Program Files\Java\jre1.8.0_171\bin;D:\Software Installing\Android Studio\jre\jre;C:\Program Files\Java\jdk-10.0.2\bin;D:\Software Installing\Android SDK\platform-tools;C:\WINDOWS\System32\OpenSSH\;D:\Software Installing\Snort\bin;C:\Program Files\nodejs\;D:\Software Installing\Gpg4win\..\GnuPG\bin;C:\Users\Sujay Mahadik\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\Sujay Mahadik\AppData\Local\Programs\Python\Python36-32\;C:\Users\Sujay Mahadik\AppData\Local\Microsoft\WindowsApps;D:\opencv\build\x64\vc14\bin;C:\Users\Sujay Mahadik\AppData\Local\Microsoft\WindowsApps;C:\Users\Sujay Mahadik\AppData\Roaming\Composer\vendor\bin;D:\Software Installing\Microsoft VS Code\bin;D:\Software Installing\go-ipfs;D:\Software Installing\Snort\bin;C:\Users\Sujay Mahadik\AppData\Roaming\npm
9 verbose lifecycle [email protected]~build: CWD: E:\github\file-post
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'npm run build-css && react-scripts build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `npm run build-css && react-scripts build`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:915:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\github\file-post
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v8.12.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `npm run build-css && react-scripts build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Please include any relevant log snippets or files here.
Hi ๐ ,
I have been browsing most of the components. I'm very happy to see this themed version of Material-UI! Great job. I have gathered some notes looking at the source code:
[className]: className !== undefined
pattern:material-kit-react/src/components/Card/CardBody.jsx
Lines 15 to 18 in b4e1912
const cardBodyClasses = classNames({ [classes.cardBody]: true }, className);
classes
API over the className
can save LoC.rest
after rather than before the other properties:material-kit-react/src/components/CustomButtons/IconButton.jsx
Lines 11 to 12 in b4e1912
ref
property to get a reference on the root element rather than using this logic. You might have different header in the page, who knows.material-kit-react/src/components/Header/Header.jsx
Lines 40 to 41 in b4e1912
.getFullYear()
, isn't .getYear()
deprecated?Keep the good work :)
Publish this kit on npm help coders deploy more efficient, and update in a more convenient way, so why not doing this?
Hi,
I noticed a small z-index problem on the live presentation page. On the navbar with notifications the dropdown menu appears behind the navbar with profile which is below.
Also on navbar with profile register is spelled 'regiter'. :)
Can't wait for the opportunity to use the kit in react. Keep up the great work.
./node_modules/@material-ui/core/ButtonBase/ButtonBase.js
Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in '~/node_modules/@material-ui/core/ButtonBase'
how to resolve about that
I can change the primary color Purple to another color such as Navy blue "#2f2fab" in material-kit-react.jsx
from:
const primaryColor = "#9c27B0";
to:
const primaryColor = "#2f2fab";
But that does not change the primary color on the following parts of the theme:
!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US
Page
https://demos.creative-tim.com/material-kit-pro-react/#/sections#pricing
Please answer the following questions for yourself before submitting an issue.
After clicking "Get Started" I expect that pricing section to become selected.
Nothing happens
No info available
Same is happening whether on a local setup or on your website demo site.
Please include any relevant log snippets or files here.
I got the following error message although I follow all the steps in doc:
Can't resolve 'assets/scss/material-kit-react.css?v=1.1.0' in .....
system: Mac os 10.11.6
node version: 10.7
npm version: 10.2
Please answer the following questions for yourself before submitting an issue.
Run the following in the terminal:
npm run build
Site then builds.
Run the following in the terminal:
npm run build
And get an error 'npm ERR! missing script: build-css'
Note, this issue only exists with material-kit-react-v1.4.0. It does not exist with material-kit-react-v1.3.0. The package.json, at least, seems to be different in v1.4.0. Perhaps that has caused this bug?
$ npm run build
TERMINAL OUTPUT from running 'npm run build' in \material-kit-react-v1.4.0 folder:
[email protected] build C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
npm run build-css && react-scripts build
npm ERR! missing script: build-css
npm ERR!
npm ERR! Did you mean this?
npm ERR! build
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Bob\AppData\Roaming\npm-cache_logs\2019-02-16T19_34_36_688Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run build-css && react-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Bob\AppData\Roaming\npm-cache_logs\2019-02-16T19_34_36_703Z-debug.log
OUTPUT OF 2019-02-16T19_34_36_688Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build-css' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: build-css
4 verbose stack
4 verbose stack Did you mean this?
4 verbose stack build
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:280:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
5 verbose cwd C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
6 verbose Windows_NT 10.0.17134
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build-css"
8 verbose node v10.15.1
9 verbose npm v6.4.1
10 error missing script: build-css
10 error
10 error Did you mean this?
10 error build
11 verbose exit [ 1, true ]
OUTPUT OF 2019-02-16T19_34_36_703Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]build: [email protected]
6 info lifecycle [email protected]
7 verbose lifecycle [email protected]build: unsafe-perm in lifecycle truebuild: PATH: -----I have removed these paths from this output------
8 verbose lifecycle [email protected]
9 verbose lifecycle [email protected]build: CWD: C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0build: Args: [ '/d /s /c', 'npm run build-css && react-scripts build' ]
10 silly lifecycle [email protected]
11 silly lifecycle [email protected]build: Returned: code: 1 signal: nullbuild: Failed to exec build script
12 info lifecycle [email protected]
13 verbose stack Error: [email protected] build: npm run build-css && react-scripts build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Bob\Documents\Repositories\material-kit-react-v1.4.0
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v10.15.1
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: npm run build-css && react-scripts build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Run the following in the terminal in the \material-kit-react-v1.4.0 folder:
npm run build
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
Please include any relevant log snippets or files here.
The live preview:
https://www.creative-tim.com/live/material-kit-react
doesn't render correctly on an iPad using Chrome or Safari.
I want to change the colors in Header.jsx : defaults are primary, secondary ...
if I choose a specific RGB color or any CSS color it didn't work,
I tried to use HUE from material UI but also didn't work with react 16+
I implemented this by making a new variable in the state called buttonToggle
, defaulting it to false
in the constructor, then changing it in handleClick
like this:
handleClick = () => {
const buttonToggle = !this.state.buttonToggle;
this.setState({ buttonToggle: buttonToggle, open: buttonToggle });
}
Even when I tried just doing this.setState({ open: !this.state.open })
, the handleClose
method was being called before the handleClick
method, so just flipping the open
state variable wasn't enough.
I am using WebStorm, late version and have installed the material-kit-react by issuing:
npm install material-kit-react --save
I addd the .env file and added the path to that file like"./node_modules/material-kit-react/src" and now I am getting this error: ./node_modules/material-kit-react/src/views/LandingPage/LandingPage.jsx Module parse failed: Unexpected token (29:21) You may need an appropriate loader to handle this file type. | class LandingPage extends React.Component { | render() { | const { classes, ...rest } = this.props; | return ( |
FYI, I believe Webstorm uses the Babel. I am using the latest React as well.
This is part of my package.json file:
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"highcharts-data": "^0.1.7",
"highcharts-exporting": "^0.1.7",
"highcharts-more": "^0.1.7",
"highcharts-offline-exporting": "^0.1.7",
"hls.js": "^0.11.0",
"material-kit-react": "^1.4.0",
"material-ui": "^0.20.2",
"material-ui-treeview": "^3.2.0",
"moment": "^2.24.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-highcharts": "^16.0.2",
"react-player": "^1.9.3",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"video-react": "^0.13.3"
The content of my .babelrc file is
{
"presets": ["es2015", "stage-0", "react"]
}
I am submitting this issue as it was suggested by einazare (Manu).
I would truly appreciate your quick action and kind consideration on this matter.
Thanks,
Farshid
Do you have a timeline/plans for supporting Material-ui-react v4? The alpha is out and it's clear that some changes will be required.
Please answer the following questions for yourself before submitting an issue.
When Value is changed on dropdown menuOnClick method is not firing
What is the current behavior?
<CustomDropdown
id="purpose"
name="purpose"
buttonText={selectedPurposeIndex!==null ? Purposes[selectedPurposeIndex] : 'Select Purpose of the request'}
dropdownHeader="Select Purpose of the request"
menuOnClick={handlePurposeChange}
buttonProps={{
color: "info",
fullWidth: true
}}
dropdownList={Purposes}
/>
handlePurposeChange is passed as props
handlePurposeChange = (event, index) => {
console.log(index)
this.setState({
selectedPurposeIndex: index,
dropPurpose: Purposes[index]
})
};
Awesome work! I love the components design.
Do you plan to publish the components as separate modules that I could use together with material-ui v1.0?
Love to see if there is a plan for Typescript support as well.
react-popper recently changed to version 1.0.0. In this version property 'Target' is missing.
Solution: Install [email protected]
Hi there,
just cloned,
npm i
npm run start
./src/index.js
Module not found: Can't resolve 'assets/scss/material-kit-react.css' in '/home/utente/Desktop/projects/material-kit-react/src'
Running Ubuntu 16.4
npm 6.0.1
node 9.11.1
Please answer the following questions for yourself before submitting an issue.
The CircleCI build will successfully build without Module not found error.
The CircleCI build is failing with a Module not found error.
Added NODE_PATH=./src in package.json scripts, even tried with creating .env file with NODE_PATH=src, both method works locally, but the committed repository on CircleCI is always failing. I even tried making absolute path to relative path, still no luck. Tried all variations of NODE_PATH=./src everything works locally, but not on CircleCI. Even tried setting environment on config.yml.
config.yml
- run:
name: (Production) Build
command: npm run build
environment:
NODE_PATH: src/
package.json
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass-chokidar src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
config.yml
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:8.12.0
- image: fstab/aws-cli
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
working_directory: ~/repo
steps:
- checkout
- run: sudo apt-get -y -qq install awscli
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: npm install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: npm run build
- run: aws configure set default.s3.signature_version s3v4
- run: aws s3 cp ./build s3://admin.app.com/ --recursive --region eu-west-2
.env with NODE_PATH=src, local npm run build, builds successfully.
> [email protected] build /home/circleci/repo
> npm run build-css && react-scripts build
> [email protected] build-css /home/circleci/repo
> node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/
Wrote 1 CSS files to /home/circleci/repo/src/
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'views/Components/Components.jsx' in '/home/circleci/repo/src/routes'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run build-css && react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/circleci/.npm/_logs/2018-09-20T13_53_00_276Z-debug.log
Exited with code 1
There are a lot of typos on the tutorial-components.html page that comes with the download. The html file opens up to this page -> https://creativetimofficial.github.io/material-kit-react/#/documentation/tutorial.
The docs here are rampant with typos. I'd be more than happy to fix them with your permission.
Hi,
I am trying to use the basic themes for one of the project.
I am building a display panel with few components on it.
The problem is for a very simple modification it compile the whole bundle including the kit.
The process is very slow to use it this way (Takes 2 mins sometimes)
I would like to know - how I can make faster development
Thanks
Manoj
Please answer the following questions for yourself before submitting an issue.
npm start should compile without warnings
npm start compiles with warnings
$ npm start
[email protected] start C:\Users\Jack\documents\Repositories\material-kit-react-v1.4.0
react-scripts start
Starting the development server...
Compiled with warnings.
(webpack)/buildin/global.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
(webpack)/buildin/module.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
Please provide detailed steps for reproducing the issue.
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
Please include any relevant log snippets or files here.
Am about to purchase both the material kit pro react & dashboard to support some project work I'm doing, but I'm having to hack the current free version (this repo) to support Gatsby.
While that's OK for my current project, but would it be possible if you could include instructions or a fork which would make it a lot easier in the future?
If I copy the source from https://demos.creative-tim.com/material-kit-react/#/documentation/notifications and use it as my base, when it tries to compile I get an error:
Module not found: Can't resolve 'components/Clearfix/Clearfix.jsx'
I looked and it is not there.
DateTimePicker as described in documentation not fully match the theme: floating label are not the same size and it behavior not like in CustomInput.
But react-datetime
support custom input render, so we can pass CustomInput to it.
Consider another implementation:
import React from 'react';
import Datetime from 'react-datetime';
import CustomInput from 'material-kit-react/...;
const DateTimePicker = (props) => {
const {
inputProps: { onBlur, onFocus, value, onChange, ...restInputProps },
formControlProps,
labelText,
...restProps
} = props;
return (
<Datetime
onFocus={onFocus}
onBlur={onBlur}
value={value}
onChange={onChange}
renderInput={(dateInputProps, open, close) => (
<CustomInput
inputProps={{ ...dateInputProps, ...restInputProps }}
onBlur={close}
onFocus={open}
labelText={labelText}
formControlProps={formControlProps}
/>
)}
{...restProps}
/>
);
};
with corrected style
.rdt.rdtOpen .rdtPicker {
margin-top: 24px;
}
Just being picky, sorry.
Please answer the following questions for yourself before submitting an issue.
Please provide detailed steps for reproducing the issue.
`
import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
// import Header from "components/Header/Header.jsx";
// import HeaderLinks from "components/Header/HeaderLinks.jsx";
// import Footer from "components/Footer/Footer.jsx";
import GridContainer from "material-kit-react/dist/components/Grid/GridContainer";
// import GridContainer from "material-ui-kit/dist/components/Grid/GridContainer"
///home/ct-developer/NODEPRJ/mui-sample-react-app/node_modules/material-kit-react/dist/components/Card/Card.js
import GridItem from "material-kit-react/dist/components/Grid/GridItem";
import Button from "material-kit-react/dist/components/CustomButtons/Button";
import Card from "material-kit-react/dist/components/Card/Card";
import CardBody from "material-kit-react/dist/components/Card/CardBody";
import CardHeader from "material-kit-react/dist/components/Card/CardHeader";
import CardFooter from "material-kit-react/dist/components/Card/CardFooter";
import CustomInput from "material-kit-react/dist/components/CustomInput/CustomInput";
import loginPageStyle from "material-kit-react/dist/assets/jss/material-kit-react/views/loginPage.js";
// /home/ct-developer/NODEPRJ/mui-sample-react-app/node_modules/material-kit-react/dist/assets/jss/material-kit-react/views/loginPage.js
// import image from "assets/img/bg7.jpg";
class LoginCardPanelPage extends React.Component {
constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
cardAnimaton: "cardHidden"
};
}
componentDidMount() {
// we add a hidden class to the card and after 700 ms we delete it and the transition appears
setTimeout(
function() {
this.setState({ cardAnimaton: "" });
}.bind(this),
700
);
}
render() {
const { classes, ...rest } = this.props;
return (
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<Card className={classes[this.state.cardAnimaton]}>
<form className={classes.form}>
<CardHeader color="primary" className={classes.cardHeader}>
<h4>Login</h4>
<div className={classes.socialLine}>
</div>
</CardHeader>
<p className={classes.divider}>Or Be Classical</p>
<CardBody>
<CustomInput
labelText="First Name..."
id="first"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "text",
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Email..."
id="email"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
<CustomInput
labelText="Password"
id="pass"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
endAdornment: (
<InputAdornment position="end">
<Icon className={classes.inputIconsColor}>
lock_outline
</Icon>
</InputAdornment>
)
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button simple color="primary" size="lg">
Get started
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}
}
export default withStyles(loginPageStyle)(LoginCardPanelPage);
`
2. step 2
THe page is not rendering with Button component - ifyou remove that component it renders. This is the exception in debug console -
Download the React DevTools for a better development experience: https://fb.me/react-devtools
react-dom.development.js:17411 Download the React DevTools for a better development experience: https://fb.me/react-devtools
index.js:2178 Warning: Failed prop type: Invalid prop component
of type object
supplied to Route
, expected function
.
in Route (at src/index.js:19)
invariant.js:42 Uncaught Error: Unable to find node on an unmounted component.
at invariant (invariant.js:42)
at findCurrentFiberUsingSlowPath (react-dom.development.js:3779)
at findCurrentHostFiber (react-dom.development.js:3887)
at findHostInstance (react-dom.development.js:16825)
at Object.findDOMNode (react-dom.development.js:17311)
at ButtonBase.componentDidMount (ButtonBase.js:222)
at commitLifeCycles (react-dom.development.js:14524)
at commitAllLifeCycles (react-dom.development.js:15738)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
at invokeGuardedCallback (react-dom.development.js:248)
at commitRoot (react-dom.development.js:15908)
at completeRoot (react-dom.development.js:17296)
at performWorkOnRoot (react-dom.development.js:17224)
at performWork (react-dom.development.js:17128)
at performSyncWork (react-dom.development.js:17100)
at requestWork (react-dom.development.js:16988)
at scheduleWork (react-dom.development.js:16782)
at scheduleRootUpdate (react-dom.development.js:17470)
at updateContainerAtExpirationTime (react-dom.development.js:17497)
at updateContainer (react-dom.development.js:17524)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17786)
at react-dom.development.js:17926
at unbatchedUpdates (react-dom.development.js:17351)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:17922)
at Object.render (react-dom.development.js:17981)
at Object../src/index.js (index.js:15)
at webpack_require (bootstrap b3c89797df7aeab37343:678)
at fn (bootstrap b3c89797df7aeab37343:88)
at Object.0 (LoginCardPanelPage.jsx:127)
at webpack_require (bootstrap b3c89797df7aeab37343:678)
at ../material-kit-react/dist/assets/jss/material-kit-react.js.Object.defineProperty.value (bootstrap b3c89797df7aeab37343:724)
at bootstrap b3c89797df7aeab37343:724
index.js:2178 The above error occurred in the component:
in ButtonBase
in WithStyles(ButtonBase)
in Button
in WithStyles(Button)
in RegularButton
in WithStyles(RegularButton) (at LoginCardPanelPage.jsx:113)
in div
in CardFooter
in WithStyles(CardFooter) (at LoginCardPanelPage.jsx:112)
in form (at LoginCardPanelPage.jsx:55)
in div
in Card
in WithStyles(Card) (at LoginCardPanelPage.jsx:54)
in div
in Grid
in WithStyles(Grid)
in GridItem
in WithStyles(GridItem) (at LoginCardPanelPage.jsx:53)
in div
in Grid
in WithStyles(Grid)
in GridContainer
in WithStyles(GridContainer) (at LoginCardPanelPage.jsx:52)
in div (at LoginCardPanelPage.jsx:51)
in div (at LoginCardPanelPage.jsx:49)
in LoginCardPanelPage (created by WithStyles(LoginCardPanelPage))
in WithStyles(LoginCardPanelPage) (created by Route)
in Route (at src/index.js:19)
in Switch (at src/index.js:17)
in Router (at src/index.js:16)
The "filter" css class, when applied to the Parallax component, is disabling all the buttons and links inside the component.
<Parallax filter image={require("assets/img/landing-bg.jpg")}>
Example: https://creativetimofficial.github.io/material-kit-react/#/landing-page
Not sure what exactly content: "''" is supposed to do, but removing it has fixed the issue for me:
filter: { "&:before": { background: "rgba(0, 0, 0, 0.05)" }, "&:after,&:before": { position: "absolute", zIndex: "1", width: "100%", height: "100%", display: "block", left: "0", top: "0", // content: "''" } },
is this for demo? or can i add it on existing material-ui-next.com based project?
Hi,
need to update state for email address and password in order to authenticate. using the signup page (built from the template of login page) but text entered into those input fields aren't updating in state. I've looked into the PropTypes for CustomInput and can't seem to get state to update after an onChange event.
Has anyone else been experiencing this issue?
Thanks!
I'm confused about the reasoning to choose Material Kit React over Material UI. What advantages does it gain over Material UI?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.