question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createUseStyles has access to theme without useTheme being passed

See original GitHub issue

Expected 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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
kofcommented, Nov 2, 2020

I think we could have <ThemeProvider theme={theme} useTheme={true}/> to turn on auto subscription to the theme

1reaction
kofcommented, Nov 2, 2020

In any case, please create a separate issue, this discussion didn’t belong here.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found