Mixing
How do I create css class in createMuiTheme() and use them directly without having to get its value from...
I am trying to avoid typing redundant code. In multiple components I have created the same css classes. I want to add them to the theme using createMuiTheme() and then only using the style directly from the theme without having to call "classes" props on the Component props.
I have tried creating a theme on the root Component like this:
const theme = createMuiTheme({
palette:{
primary: {
main: '#47286E',
light: '#D91677'
},
secondary: {
main: '#9156D8'
},
},
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
},
});
then I passed theme down to the other components using
<MuiThemeProvider theme={theme}>
I tried importing the fab button directly inside the component
<Fab variant="extended" className={this.props.theme.fab} size='small'>
Change
</Fab>
however I don't seem to get any value when I try to get fab css class. I just don't want to create a whole new
const styles = theme => {
blabbla
}
and import it in every component using the "classes" props if what I want is already on the theme being passed down to its child components.
reactjs material-ui
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
add a comment |
I am trying to avoid typing redundant code. In multiple components I have created the same css classes. I want to add them to the theme using createMuiTheme() and then only using the style directly from the theme without having to call "classes" props on the Component props.
I have tried creating a theme on the root Component like this:
const theme = createMuiTheme({
palette:{
primary: {
main: '#47286E',
light: '#D91677'
},
secondary: {
main: '#9156D8'
},
},
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
},
});
then I passed theme down to the other components using
<MuiThemeProvider theme={theme}>
I tried importing the fab button directly inside the component
<Fab variant="extended" className={this.props.theme.fab} size='small'>
Change
</Fab>
however I don't seem to get any value when I try to get fab css class. I just don't want to create a whole new
const styles = theme => {
blabbla
}
and import it in every component using the "classes" props if what I want is already on the theme being passed down to its child components.
reactjs material-ui
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
add a comment |
I am trying to avoid typing redundant code. In multiple components I have created the same css classes. I want to add them to the theme using createMuiTheme() and then only using the style directly from the theme without having to call "classes" props on the Component props.
I have tried creating a theme on the root Component like this:
const theme = createMuiTheme({
palette:{
primary: {
main: '#47286E',
light: '#D91677'
},
secondary: {
main: '#9156D8'
},
},
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
},
});
then I passed theme down to the other components using
<MuiThemeProvider theme={theme}>
I tried importing the fab button directly inside the component
<Fab variant="extended" className={this.props.theme.fab} size='small'>
Change
</Fab>
however I don't seem to get any value when I try to get fab css class. I just don't want to create a whole new
const styles = theme => {
blabbla
}
and import it in every component using the "classes" props if what I want is already on the theme being passed down to its child components.
reactjs material-ui
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
I am trying to avoid typing redundant code. In multiple components I have created the same css classes. I want to add them to the theme using createMuiTheme() and then only using the style directly from the theme without having to call "classes" props on the Component props.
I have tried creating a theme on the root Component like this:
const theme = createMuiTheme({
palette:{
primary: {
main: '#47286E',
light: '#D91677'
},
secondary: {
main: '#9156D8'
},
},
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
},
});
then I passed theme down to the other components using
<MuiThemeProvider theme={theme}>
I tried importing the fab button directly inside the component
<Fab variant="extended" className={this.props.theme.fab} size='small'>
Change
</Fab>
however I don't seem to get any value when I try to get fab css class. I just don't want to create a whole new
const styles = theme => {
blabbla
}
and import it in every component using the "classes" props if what I want is already on the theme being passed down to its child components.
reactjs material-ui
reactjs material-ui
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
asked Jan 2 at 18:45
Jeff GoesJeff Goes
837
837
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I don't think createMuiTheme is meant for that.
Alternatively you could just create a style object that you want to reuse
const styles = {
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
}
};
And just import and use it wherever you need to
import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';
...
withStyles({...fabStyles, ...styles})(Component);
If you need the theme and styles.
withTheme(withStyles({...fabStyles, ...styles})(Component));
You can also use recompose to clean this up.
answered Jan 2 at 19:43
GalupufGalupuf
871418
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use thewithThemeHOC in addition towithStyles
– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
|
show 3 more comments
className={this.props.theme.fab} doesn't work because this.props.theme.fab is an object, not a class name. When withStyles is used, it takes care of generating a unique class name (e.g. available via props.classes.fab) as well as injecting the CSS for that class into the head of the document. The fab object in your theme has not had this work done for it.
The code below shows a couple ways you can avoid redundant code. The first is a withFab function that encapsulates the CSS and the call to withStyles.
The second uses the fab object more directly and just passes it to the style property rather than the className property. You could get the styles from theme.fab (rather than a separate js file) similar to your initial approach, but there isn't necessarily a reason to put this in your theme unless you care about being able to override it via different MuiThemeProviders in your rendering hierarchy.
There are a couple downsides to the second (style property) approach:
- If you use this on a lot of different elements, the CSS is redundantly specified in the DOM on each of those elements.
- It won't support CSS that requires classes (e.g. using pseudo elements like :hover)
So I would recommend something more similar to the first option (UseWithFab/withFab) shown below.
withFab.js
import withStyles from "@material-ui/core/styles/withStyles";
const styles = {
fab: {
backgroundColor: "lightblue"
}
};
export const fabStyles = {
backgroundColor: "lightgreen"
};
const withFab = component => {
return withStyles(styles)(component);
};
export default withFab;
index.js
import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";
const UseWithFab = withFab(props => {
return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
return (
<>
<UseWithFab />
<UseFabStyles />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
add a comment |
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
});
}
});
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%2f54011579%2fhow-do-i-create-css-class-in-createmuitheme-and-use-them-directly-without-havi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I don't think createMuiTheme is meant for that.
Alternatively you could just create a style object that you want to reuse
const styles = {
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
}
};
And just import and use it wherever you need to
import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';
...
withStyles({...fabStyles, ...styles})(Component);
If you need the theme and styles.
withTheme(withStyles({...fabStyles, ...styles})(Component));
You can also use recompose to clean this up.
answered Jan 2 at 19:43
GalupufGalupuf
871418
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use thewithThemeHOC in addition towithStyles
– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
|
show 3 more comments
I don't think createMuiTheme is meant for that.
Alternatively you could just create a style object that you want to reuse
const styles = {
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
}
};
And just import and use it wherever you need to
import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';
...
withStyles({...fabStyles, ...styles})(Component);
If you need the theme and styles.
withTheme(withStyles({...fabStyles, ...styles})(Component));
You can also use recompose to clean this up.
answered Jan 2 at 19:43
GalupufGalupuf
871418
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use thewithThemeHOC in addition towithStyles
– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
|
show 3 more comments
I don't think createMuiTheme is meant for that.
Alternatively you could just create a style object that you want to reuse
const styles = {
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
}
};
And just import and use it wherever you need to
import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';
...
withStyles({...fabStyles, ...styles})(Component);
If you need the theme and styles.
withTheme(withStyles({...fabStyles, ...styles})(Component));
You can also use recompose to clean this up.
answered Jan 2 at 19:43
GalupufGalupuf
871418
I don't think createMuiTheme is meant for that.
Alternatively you could just create a style object that you want to reuse
const styles = {
fab: {
position: "relative",
top: 0,
marginTop: 20px
textTransform: 'none',
width: 220,
height: 50
}
};
And just import and use it wherever you need to
import fabStyles from '../../somewhere-everyone-can-get-it.js';
import styles from './styles-for-this-component.js';
...
withStyles({...fabStyles, ...styles})(Component);
If you need the theme and styles.
withTheme(withStyles({...fabStyles, ...styles})(Component));
You can also use recompose to clean this up.
answered Jan 2 at 19:43
GalupufGalupuf
871418
edited Jan 2 at 21:31
answered Jan 2 at 19:43
GalupufGalupuf
871418
answered Jan 2 at 19:43
GalupufGalupuf
871418
answered Jan 2 at 19:43
GalupufGalupuf
871418
871418
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use thewithThemeHOC in addition towithStyles
– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
|
show 3 more comments
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use thewithThemeHOC in addition towithStyles
– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
but how can I have access to the theme variable inside of these separate files?
– Jeff Goes
Jan 2 at 20:22
I don't see you using theme styles in your example, but you can use the
withTheme HOC in addition to withStyles– Galupuf
Jan 2 at 20:35
I don't see you using theme styles in your example, but you can use the
withTheme HOC in addition to withStyles– Galupuf
Jan 2 at 20:35
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
can u please give me an example using codebox or something? Im still getting the hang of using HOC.... thank you!
– Jeff Goes
Jan 2 at 21:18
Updated answer :)
– Galupuf
Jan 2 at 21:32
Updated answer :)
– Galupuf
Jan 2 at 21:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
thank you so much!
– Jeff Goes
Jan 2 at 23:32
|
show 3 more comments
className={this.props.theme.fab} doesn't work because this.props.theme.fab is an object, not a class name. When withStyles is used, it takes care of generating a unique class name (e.g. available via props.classes.fab) as well as injecting the CSS for that class into the head of the document. The fab object in your theme has not had this work done for it.
The code below shows a couple ways you can avoid redundant code. The first is a withFab function that encapsulates the CSS and the call to withStyles.
The second uses the fab object more directly and just passes it to the style property rather than the className property. You could get the styles from theme.fab (rather than a separate js file) similar to your initial approach, but there isn't necessarily a reason to put this in your theme unless you care about being able to override it via different MuiThemeProviders in your rendering hierarchy.
There are a couple downsides to the second (style property) approach:
- If you use this on a lot of different elements, the CSS is redundantly specified in the DOM on each of those elements.
- It won't support CSS that requires classes (e.g. using pseudo elements like :hover)
So I would recommend something more similar to the first option (UseWithFab/withFab) shown below.
withFab.js
import withStyles from "@material-ui/core/styles/withStyles";
const styles = {
fab: {
backgroundColor: "lightblue"
}
};
export const fabStyles = {
backgroundColor: "lightgreen"
};
const withFab = component => {
return withStyles(styles)(component);
};
export default withFab;
index.js
import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";
const UseWithFab = withFab(props => {
return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
return (
<>
<UseWithFab />
<UseFabStyles />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
add a comment |
className={this.props.theme.fab} doesn't work because this.props.theme.fab is an object, not a class name. When withStyles is used, it takes care of generating a unique class name (e.g. available via props.classes.fab) as well as injecting the CSS for that class into the head of the document. The fab object in your theme has not had this work done for it.
The code below shows a couple ways you can avoid redundant code. The first is a withFab function that encapsulates the CSS and the call to withStyles.
The second uses the fab object more directly and just passes it to the style property rather than the className property. You could get the styles from theme.fab (rather than a separate js file) similar to your initial approach, but there isn't necessarily a reason to put this in your theme unless you care about being able to override it via different MuiThemeProviders in your rendering hierarchy.
There are a couple downsides to the second (style property) approach:
- If you use this on a lot of different elements, the CSS is redundantly specified in the DOM on each of those elements.
- It won't support CSS that requires classes (e.g. using pseudo elements like :hover)
So I would recommend something more similar to the first option (UseWithFab/withFab) shown below.
withFab.js
import withStyles from "@material-ui/core/styles/withStyles";
const styles = {
fab: {
backgroundColor: "lightblue"
}
};
export const fabStyles = {
backgroundColor: "lightgreen"
};
const withFab = component => {
return withStyles(styles)(component);
};
export default withFab;
index.js
import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";
const UseWithFab = withFab(props => {
return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
return (
<>
<UseWithFab />
<UseFabStyles />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
add a comment |
className={this.props.theme.fab} doesn't work because this.props.theme.fab is an object, not a class name. When withStyles is used, it takes care of generating a unique class name (e.g. available via props.classes.fab) as well as injecting the CSS for that class into the head of the document. The fab object in your theme has not had this work done for it.
The code below shows a couple ways you can avoid redundant code. The first is a withFab function that encapsulates the CSS and the call to withStyles.
The second uses the fab object more directly and just passes it to the style property rather than the className property. You could get the styles from theme.fab (rather than a separate js file) similar to your initial approach, but there isn't necessarily a reason to put this in your theme unless you care about being able to override it via different MuiThemeProviders in your rendering hierarchy.
There are a couple downsides to the second (style property) approach:
- If you use this on a lot of different elements, the CSS is redundantly specified in the DOM on each of those elements.
- It won't support CSS that requires classes (e.g. using pseudo elements like :hover)
So I would recommend something more similar to the first option (UseWithFab/withFab) shown below.
withFab.js
import withStyles from "@material-ui/core/styles/withStyles";
const styles = {
fab: {
backgroundColor: "lightblue"
}
};
export const fabStyles = {
backgroundColor: "lightgreen"
};
const withFab = component => {
return withStyles(styles)(component);
};
export default withFab;
index.js
import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";
const UseWithFab = withFab(props => {
return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
return (
<>
<UseWithFab />
<UseFabStyles />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
className={this.props.theme.fab} doesn't work because this.props.theme.fab is an object, not a class name. When withStyles is used, it takes care of generating a unique class name (e.g. available via props.classes.fab) as well as injecting the CSS for that class into the head of the document. The fab object in your theme has not had this work done for it.
The code below shows a couple ways you can avoid redundant code. The first is a withFab function that encapsulates the CSS and the call to withStyles.
The second uses the fab object more directly and just passes it to the style property rather than the className property. You could get the styles from theme.fab (rather than a separate js file) similar to your initial approach, but there isn't necessarily a reason to put this in your theme unless you care about being able to override it via different MuiThemeProviders in your rendering hierarchy.
There are a couple downsides to the second (style property) approach:
- If you use this on a lot of different elements, the CSS is redundantly specified in the DOM on each of those elements.
- It won't support CSS that requires classes (e.g. using pseudo elements like :hover)
So I would recommend something more similar to the first option (UseWithFab/withFab) shown below.
withFab.js
import withStyles from "@material-ui/core/styles/withStyles";
const styles = {
fab: {
backgroundColor: "lightblue"
}
};
export const fabStyles = {
backgroundColor: "lightgreen"
};
const withFab = component => {
return withStyles(styles)(component);
};
export default withFab;
index.js
import React from "react";
import ReactDOM from "react-dom";
import withFab, { fabStyles } from "./withFab";
const UseWithFab = withFab(props => {
return <div className={props.classes.fab}>Using withFab</div>;
});
const UseFabStyles = props => {
return <div style={fabStyles}>Using fabStyles</div>;
};
function App(props) {
return (
<>
<UseWithFab />
<UseFabStyles />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
answered Jan 2 at 19:36
Ryan CogswellRyan Cogswell
5,7401625
5,7401625
add a comment |
add a comment |
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.
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%2f54011579%2fhow-do-i-create-css-class-in-createmuitheme-and-use-them-directly-without-havi%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
