I'm having some trouble following the docs on how to get this to work
I have a component that has some styles created, for the most part, all of these styles will apply to wherever this component is rendered but sometimes depending on what page the app is routed to I will want to change the overall height of the component on those pages. I figured I could just do this by passing in some new height props of some sort to follow a more theme centric approach. How would I get this to work with my current setup?
The styles file
const styles = theme => ({
root: {
backgroundSize: 'cover',
padding: '25px 20px',
boxSizing: 'border-box',
backgroundPosition: '50% 0',
backgroundColor: 'rgba(40,70,94,.7)',
backgroundBlendMode: 'multiply',
...theme.root
}
});
export default styles;
The component file
import React from 'react';
import styles from './EventTop.styles';
import injectSheet, { ThemeProvider } from 'react-jss';
const EventTop = (props) => (
<ThemeProvider theme={props.theme}>
<aside className={props.classes.root} style={{ backgroundImage: `url(${props.event.event_logo})` }}>
<div className="wrapper">
<div className="event-info">
<span className="event-time">
7:00 PM
</span>
<span className="event-date">
27 Jun 2020
</span>
<span className="event-end-time">
Ends at 10:00 PM
</span>
<span className="event-title">
Bidr Gala
</span>
<span className="event-attire">
Cocktail Attire
</span>
</div>
</div>
</aside>
</ThemeProvider>
);
export default injectSheet(styles)(EventTop);
And then when I render it I pictured something like this
<EventTop event={this.props.events.currentEvent} theme={{ height: 'calc(100vh - 64px)' }}/>
But when I try to console log out the theme getting passed to the style generator I don't see the theme coming in.
I have Material UI
installed and the whole app is wrapped in it's MuiThemeProvider
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<App>
<Reboot />
<AppRouter />
</App>
</MuiThemeProvider>
</Provider>
And this is the theme I'm actually seeing the material theme and not my own merged anywhere in it.