# For @material-ui/core v4+
## withTheme HOC
For use in class or function components:
import { withTheme } from '@material-ui/core/styles';
function DeepChildRaw(props) {
return <span>{`spacing ${props.theme.spacing}`}</span>;
}
const DeepChild = withTheme(DeepChildRaw);
# useTheme hook
import { useTheme } from '@material-ui/core/styles';
function DeepChildRaw(props) {
const theme = useTheme()
return <span>{`spacing ${theme.spacing}`}</span>;
}
const DeepChild = withTheme(DeepChildRaw);
Ok if you are using material-ui version greater than 4, then the above solution might not work for you. Follow the below's code
import { withTheme } from '@material-ui/core/styles';
function DeepChildRaw(props) {
return <span>{`spacing ${props.theme.spacing}`}</span>;
}
const DeepChild = withTheme(DeepChildRaw);
Reference: https://material-ui.com/styles/advanced/