score:13
you need to use the hoc (higher order component) provided with material-ui (note i am using the beta version, ymmv).
example:
leftnavigation.jsx
import react from 'react';
import proptypes from 'prop-types';
import hidden from 'material-ui/hidden';
import drawer from 'material-ui/drawer';
import list from 'material-ui/list';
import divider from 'material-ui/divider';
import { withstyles } from 'material-ui/styles';
import { mailfolderlistitems, othermailfolderlistitems } from '../../../components/tiledata';
const styles = theme => ({
docked: {
height: '100%',
},
drawerpaper: {
width: 250,
height: '100%',
[theme.breakpoints.up('md')]: {
width: theme.drawerwidth,
position: 'relative',
height: '100%',
},
},
drawerheader: theme.mixins.toolbar,
});
class leftnavigation extends react.component {
render() {
const { classes, theme } = this.props;
const drawer = (
<div>
<div classname={classes.drawerheader} />
<divider />
<list><mailfolderlistitems toggle={this.props.handledrawertoggle} /></list>
<divider />
<list><othermailfolderlistitems toggle={this.props.handledrawertoggle} /></list>
</div>
);
return [
<hidden mdup key="mobile">
<drawer
type="temporary"
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={this.props.mobileopen}
classes={{ paper: classes.drawerpaper }}
onrequestclose={this.props.handledrawertoggle}
modalprops={{ keepmounted: true /* better open performance on mobile. */ }}
>
{drawer}
</drawer>
</hidden>,
<hidden mddown implementation="css" key="desktop">
<drawer
type="permanent"
open
classes={{
docked: classes.docked,
paper: classes.drawerpaper,
}}
>
{drawer}
</drawer>
</hidden>,
];
}
}
leftnavigation.proptypes = {
classes: proptypes.object.isrequired,
theme: proptypes.object.isrequired,
mobileopen: proptypes.bool.isrequired,
handledrawertoggle: proptypes.func.isrequired
};
export default withstyles(styles, { withtheme: true })(leftnavigation);
the const styles = theme => ({...})
is where you define your styles.
the export default withstyles(styles, { withtheme: true })(leftnavigation);
shows the usage with the higher order component to pass the styles / theme down to your component.
i use withtheme: true
so that not only my styles, but the theme is passed as well.
so for your code, i would do the following:
import { withstyles } from 'material-ui/styles';
const styles = theme => ({
root: {
height: '100%'
}
})
class app extends component {
render() {
const {classes} = this.props;
return (
<div classname="app">
<mainmenu/>
<div classname={classes.root}>
<grid container spacing={8}>
<grid item xs>
<chart theme={this.props.theme}/>
</grid>
</grid>
</div>
</div>
);
}
}
export default withstyles(styles, { withtheme: true})(app);
score:0
and for people using typesctipt and class components, you'll also need to add:
export interface mycomponentnameprops extends withstyles<typeof styles, true> {
// your props here...
theme: theme
}
score:22
you can also use the usetheme hook!
import { usetheme } from '@material-ui/styles';
function deepchild() {
const theme = usetheme();
return <span>{`spacing ${theme.spacing}`}</span>;
}
https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component
Source: stackoverflow.com
Related Query
- access the theme from outside material-ui component
- Access a React component method / state from outside the component
- How to access the "key" property from a reactjs component
- React, how to access the DOM element in my render function from the same component
- How to access the Redux store outside of a component in React
- How to override style of nested Material UI component from the ancestors?
- Pass values as parameters state from the component or access the status in the action creator?
- How to access route params from a component other then the Router component
- Unable to access the data from inside the For Loop from the outside of the For Loop
- Access react-final-form values from outside the form
- How to detect matched route from a component outside of the <Route/> component that was matched using react-router?
- Draft.js (react-draft-wysiwyg): text update from the outside of the Editor component does not work
- react-router v4: Determine if route has been matched from outside the component
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- Cannot access to the redux state from class component
- Getting the value from a Material UI Slider component
- Component from an EmotionJS Component library does not receive the Theme prop
- Get React Hook Value from outside the functional component
- Get the values in the form, from a component outside the form
- How to access material theme in shared component in react?
- React - What is meant by 'Do not use HOC’s in the render method of a component. Access the HOC outside the component definition.'?
- Trigger the Material TextField onChange from inner component
- How to overwrite internal component state from the outside
- Access React Context value outside of the body of a function component
- cant access the state in a functional component with useLocation from react-router-dom
- Able to get the updated state from redux store but not able to access the objects inside the updated state from the receiver component
- need to pass an effect via props or force component reload from outside the root component in preact/react
- How access redux-mapped props from outside a connected component
- Use state from useContext component and access it from other component. It's fetching ok, but in the child component it gives an error
- How to spy on history object from outside the component that uses Router?
More Query from same tag
- Why I can't get element by ref in React
- Using React.createClass instead of ES6 Classes (extends React.Component)?
- React use custom hook function
- Cannot assign a function on onClick property of React with Typescript
- React scroll to bottom of Element without scrolling iFrame parent
- Cant access object value returned from axios in custom hooks
- CRUD op Express.js Node.js Mysql Cannot insert using MVC
- Better way to add types to props in a functional component in NextJS Typescript project
- react-redux : fail to import classes
- React useState how to modify the first object in array
- Undefined value for address in react js
- Triggering useEffect only certain conditions
- TypeError: Failed to construct 'URL': Please use the 'new' operator, this DOM object constructor cannot be called as a function
- React JS - Calling function passed as a prop
- How can I get the element of another component in React.js?
- Testing props that are being passed down to child component
- How to use require() with variable names in react?
- Inline SVG using React (without JSX)
- React Router V4 - route with params failing
- How can I insert a basic Search bar in Material UI Data Grid?
- How can i initialize state by passing props from parent component to child component in ReactJS?
- mock useDispatch followed by .then() with jest inside functional component
- With Styled Components, why does a conditional style not have access to props?
- How to upload images on my React app from firebase storage?
- I want to accept only 1-24 in the input field and disable all other buttons. how is it possible
- ReactJS - TypeError: Cannot read property 'name' of undefined
- incorrect value of name attribute in event object
- Cannot open the react-foundation starter project
- Destructuring state/props in React
- react js: install downloaded apk