createUseStyles has access to theme without useTheme being passed
See original GitHub issueExpected behavior:
I had expected that not passing useTheme()
to the useStyles()
created by createUseStyles()
would prevent the theme
being available within createUseStyles
Describe the bug:
I can access the theme
without passing anything to useStyles()
. I couldn’t find anything in the documentation that suggested this was intentional, so was hoping to clarify:
- Is this an undocumented feature (in which case this pattern is safe to use)?
- Is this a bug (in which case I should avoid the pattern)?
import { createUseStyles } from "react-jss";
const useStyles = createUseStyles((theme) => ({
root: {
border: "5px blue solid",
borderColor: theme.themeColor // This correctly makes by border `themeColor`
}
}));
export default function MyComponent({ text, customWidth }) {
const classes = useStyles();
return <div className={classes.root}>{text}</div>;
}
Codesandbox link: https://codesandbox.io/s/createusestyles-automagic-theme-detection-8wks4?file=/pages/day/index.js
Versions (please complete the following information):
- jss: (
react-jss
) 10.4.0 - Browser [e.g. chrome, safari]: chrome
- OS [e.g. Windows, macOS]: macOS Feel free to add any additional versions which you may think are relevant to the bug.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:14 (9 by maintainers)
Top Results From Across the Web
How to use 'theme' and 'props' in makeStyles? - Stack Overflow
You can use arrow function without passing any argument (except theme) to makeStyles():. const useStyles = makeStyles((theme) => ({ className:( ...
Read more >JSS integration with React
Use useTheme() hook to access the theme inside of the function component. import React from 'react' import {createUseStyles, useTheme, ThemeProvider} ...
Read more >JSS integration with React
The idea is that you define a theme, wrap your application with ThemeProvider and pass the theme object to ThemeProvider . Later you...
Read more >Material-UI makeStyles, useStyles, createStyles, and ...
The theme was not passed as an additional prop through useStyles, see the code below to understand the difference between theme and additional ......
Read more >Styling with react-jss - wesionaryTEAM
Now, lets define a theme for our app. Then, we wrap our application with ThemeProvider and pass the theme object to it. Later,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think we could have
<ThemeProvider theme={theme} useTheme={true}/>
to turn on auto subscription to the themeIn any case, please create a separate issue, this discussion didn’t belong here.