Use Material-UI Classes
0
I'm currently struggeling with a problem and I can't seem to get it working. I'm using a own js file for declaring my themes. It looks something like this:
import { createMuiTheme } from '@material-ui/core/styles';
import * as variables from 'variables'
export const Theme = createMuiTheme({
typography: {
useNextVariants: true,
},
container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
},
content: {
width: variables.contentWidth,
minHeight: variables.contentMinHeight,
backgroundColor: red,
}
});
And then in my index.js I use the following code to try to implement the created theme. Most of the things also work, but I can't seem the container and context to get to display.
There's just nothing; nothing on the screen and no errors in the console.
Note this isn't all the code but only the bit that doesn't work.
import * as themes from 'themes'
//Other Imports and definitions
render(){
const { className } = this.props;
console.log(this.props); //Returns something, so I know that this.props is defined
return(
<MuiThemeProvider theme={themes.Theme}>
<Grid container className={classNames(themes.Theme.container, className)}>
<Grid className={classNames(themes.Theme.content, className)}>
</Grid>
</Grid>
</MuiThemeProvider>
);
}
export default withStyles(themes.Theme, NameofTheClassThisIsIn);
If something of my code is missing please just ask.
Kind regards,
Herr Frodo
reactjs redux material-ui
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
add a comment |
0
I'm currently struggeling with a problem and I can't seem to get it working. I'm using a own js file for declaring my themes. It looks something like this:
import { createMuiTheme } from '@material-ui/core/styles';
import * as variables from 'variables'
export const Theme = createMuiTheme({
typography: {
useNextVariants: true,
},
container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
},
content: {
width: variables.contentWidth,
minHeight: variables.contentMinHeight,
backgroundColor: red,
}
});
And then in my index.js I use the following code to try to implement the created theme. Most of the things also work, but I can't seem the container and context to get to display.
There's just nothing; nothing on the screen and no errors in the console.
Note this isn't all the code but only the bit that doesn't work.
import * as themes from 'themes'
//Other Imports and definitions
render(){
const { className } = this.props;
console.log(this.props); //Returns something, so I know that this.props is defined
return(
<MuiThemeProvider theme={themes.Theme}>
<Grid container className={classNames(themes.Theme.container, className)}>
<Grid className={classNames(themes.Theme.content, className)}>
</Grid>
</Grid>
</MuiThemeProvider>
);
}
export default withStyles(themes.Theme, NameofTheClassThisIsIn);
If something of my code is missing please just ask.
Kind regards,
Herr Frodo
reactjs redux material-ui
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
first after using wrapping the component withwithStylesclasses are exported as props asclassesso you will be applying classes as<Grid className={classNames(classes.content)}>
– warl0ck
Nov 16 '18 at 7:46
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01
add a comment |
0
0
0
I'm currently struggeling with a problem and I can't seem to get it working. I'm using a own js file for declaring my themes. It looks something like this:
import { createMuiTheme } from '@material-ui/core/styles';
import * as variables from 'variables'
export const Theme = createMuiTheme({
typography: {
useNextVariants: true,
},
container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
},
content: {
width: variables.contentWidth,
minHeight: variables.contentMinHeight,
backgroundColor: red,
}
});
And then in my index.js I use the following code to try to implement the created theme. Most of the things also work, but I can't seem the container and context to get to display.
There's just nothing; nothing on the screen and no errors in the console.
Note this isn't all the code but only the bit that doesn't work.
import * as themes from 'themes'
//Other Imports and definitions
render(){
const { className } = this.props;
console.log(this.props); //Returns something, so I know that this.props is defined
return(
<MuiThemeProvider theme={themes.Theme}>
<Grid container className={classNames(themes.Theme.container, className)}>
<Grid className={classNames(themes.Theme.content, className)}>
</Grid>
</Grid>
</MuiThemeProvider>
);
}
export default withStyles(themes.Theme, NameofTheClassThisIsIn);
If something of my code is missing please just ask.
Kind regards,
Herr Frodo
reactjs redux material-ui
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
I'm currently struggeling with a problem and I can't seem to get it working. I'm using a own js file for declaring my themes. It looks something like this:
import { createMuiTheme } from '@material-ui/core/styles';
import * as variables from 'variables'
export const Theme = createMuiTheme({
typography: {
useNextVariants: true,
},
container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
},
content: {
width: variables.contentWidth,
minHeight: variables.contentMinHeight,
backgroundColor: red,
}
});
And then in my index.js I use the following code to try to implement the created theme. Most of the things also work, but I can't seem the container and context to get to display.
There's just nothing; nothing on the screen and no errors in the console.
Note this isn't all the code but only the bit that doesn't work.
import * as themes from 'themes'
//Other Imports and definitions
render(){
const { className } = this.props;
console.log(this.props); //Returns something, so I know that this.props is defined
return(
<MuiThemeProvider theme={themes.Theme}>
<Grid container className={classNames(themes.Theme.container, className)}>
<Grid className={classNames(themes.Theme.content, className)}>
</Grid>
</Grid>
</MuiThemeProvider>
);
}
export default withStyles(themes.Theme, NameofTheClassThisIsIn);
If something of my code is missing please just ask.
Kind regards,
Herr Frodo
reactjs redux material-ui
reactjs redux material-ui
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
asked Nov 16 '18 at 7:36
Herr_FrodoHerr_Frodo
13
13
first after using wrapping the component withwithStylesclasses are exported as props asclassesso you will be applying classes as<Grid className={classNames(classes.content)}>
– warl0ck
Nov 16 '18 at 7:46
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01
add a comment |
first after using wrapping the component withwithStylesclasses are exported as props asclassesso you will be applying classes as<Grid className={classNames(classes.content)}>
– warl0ck
Nov 16 '18 at 7:46
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01
first after using wrapping the component with
withStyles classes are exported as props as classes so you will be applying classes as <Grid className={classNames(classes.content)}>– warl0ck
Nov 16 '18 at 7:46
first after using wrapping the component with
withStyles classes are exported as props as classes so you will be applying classes as <Grid className={classNames(classes.content)}>– warl0ck
Nov 16 '18 at 7:46
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333355%2fuse-material-ui-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333355%2fuse-material-ui-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
first after using wrapping the component with
withStylesclasses are exported as props asclassesso you will be applying classes as<Grid className={classNames(classes.content)}>– warl0ck
Nov 16 '18 at 7:46
I sadly only get the error message ReferenceError: classes is not defined When I try this. I also tried to just use this.props.themes.Theme.content before but this also throws th error above.
– Herr_Frodo
Nov 16 '18 at 7:53
and I have not seen having a global class within createMuiTheme function, if I may ask do you want to export those classes as global ?
– warl0ck
Nov 16 '18 at 8:12
Yes, I do. I want to export them to later use in my index.js. Sorry for the confusion
– Herr_Frodo
Nov 16 '18 at 12:01