0

I have moved my react jss styles to another file. Now I am using React context to toggle thememode. And I want to change the styles when thememode toggles from true to false and vice versa.

But since my component styles are on a new file, I can't access useContext from there. It says cannot use useContext outside of a React function. So I can't change styles and colors when thememode is changed.

Is there any way that I can get the thememode or access the value of my context?

what I have tried:

I tried putting thememode as a prop in withStyles(styles(thememode))(Mycomponent), but I can't even access thememode constant outside of the function to which I have grabbed the thememode value using usecontext.

  • Can you post some code? Maybe a stripped down codesandbox to show the problem? – Duderino9000 Jan 09 '20 at 17:03
  • its a project, 30+ components –  Jan 09 '20 at 17:04
  • What I want is to get useContext outside of a react component –  Jan 09 '20 at 17:04
  • Like a JSS stylesheet which only returns object and I use it inside my component using withStyles –  Jan 09 '20 at 17:05
  • You cannot use react hooks outside of a react component – Duderino9000 Jan 09 '20 at 17:05
  • So how does sites like material-ui changes their dark theme, they must put all their JSS styles inside of each component –  Jan 09 '20 at 17:06
  • I don't think they use JSS: https://github.com/mui-org/material-ui/blob/master/package.json Here's their ThemeProvider https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js – Duderino9000 Jan 09 '20 at 17:08
  • You should be changing the theme specified by your ThemeProvider. See my example here: https://stackoverflow.com/questions/59145165/change-root-background-color-with-material-ui-theme/59145819#59145819. – Ryan Cogswell Jan 09 '20 at 17:09
  • I have specified my theme in my ThemeContext and grabbed it in my functional component. But since my styles are in another file which returns an object, I can't access them from there. –  Jan 09 '20 at 17:12
  • Thanks everyone for their time, I am trying inline styles for now –  Jan 09 '20 at 17:16
  • `withStyles` provides the theme, you don't need to get it from context so long as it is specified in the `ThemeProvider` appropriately. – Ryan Cogswell Jan 09 '20 at 17:28

0 Answers0