Skip to content
This repository has been archived by the owner on Jun 20, 2022. It is now read-only.

Unable to retrieve the entire theme object from current ThemeProvider via th #165

Open
ividic opened this issue Feb 19, 2020 · 0 comments
Open

Comments

@ividic
Copy link
Contributor

ividic commented Feb 19, 2020

馃挜 Regression Report

In v10 I was able to retrieve any current value of the entire theme object from the current ThemeProvider via the th utility, which would get the default value if the one in the current theme is not set.

For example, in v10 I could style a react-select element via:

const StyledSelect = styled(Select)`
  .rs__control {
    background-color: ${th('inputBgColor')};
  }
}

In v11, if I try:

const StyledSelect = styled(Select)`
  .rs__control {
    background-color: ${th.color('formControl.background')};
  }
}

Unless I've specified the formControl.background in my own theme, the rendered css returns an invalid value of background-color: formControl.background;. Background is a trivial example, however the same applies to color, border, etc.

The way around this would be to deep merge the default theme from @smooth-ui/core-sc, into my own theme, however then I still can't retrieve values from the current mode or colors.formControl.

Last working version

Worked up to version: v10

Stopped working in version: v11

To Reproduce

Steps to reproduce the behavior:

See above and CodeSandbox

Expected behavior

While the default Input component from @smooth-ui/core-sc is able to receive the default and mode values, they cannot be used in any custom component without setting the values manually in each theme.

Expect same behaviour from v10 where the entire theme object is available in the th utility, with values from the closest ThemeProvider

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/purple-hill-4wxye - See comments in App.js

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
 - Memory: 55.46 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
 - Yarn: 1.15.2 - ~/.yarn/bin/yarn
 - npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
## npmPackages:
 - @smooth-ui/core-sc: ^11.1.5 => 11.1.5 
 - styled-components: ^5.0.1 => 5.0.1 
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant