Comments (5)
Surprised to find there is no easy way to get a theme variable without so much fuss!
from styled-system.
const value = themeGet('colors.blue')(props)
what is this props?
I want to use theme value in component by myself
from styled-system.
Hey guys, if you still face this problem. Make sure you use withTheme
import { themeGet } from 'styled-system'
import { withTheme } from 'styled-components'
const ChartContainer = props => {
const { data, title, unit } = props
const color = themeGet('colors.text')(props)
console.log('color is ', color)
return (
<Card variant="primary" my={5} height={8}>
<Heading fontSize={2} fontWeight="bold">
{title}
</Heading>
<Chart data={transformData(data, title, unit)} color="#fff" />
</Card>
)
}
export default withTheme(ChartContainer)
It works for me :)
from styled-system.
The themeGet
function is intended for use as an interpolation in styled-components, etc. Without styled-components the call should look like this:
const value = themeGet('colors.blue')(props)
With styled-components it looks like this:
const Box = styled.div`
color: ${themeGet('colors.blue')};
`
It's mostly a shortcut to avoid props => _.get(props.theme, 'colors.blue')
and also allows for fallback values as a second argument:
color: ${themeGet('colors.blue', '#07c')};
from styled-system.
Same thing here, I would like to access theme values outside of styled-components, and even if I call the themeGet('')(props) with this props, its doing nothing :/
from styled-system.
Related Issues (20)
- Storybook control docs generation based on theme
- Use styled-system properties inside of styled component definition with Emotion (not default props)
- Could not find a declaration file for module '@styled-system/css' implicitly has an 'any' type. HOT 1
- Combining variants and custom props HOT 2
- Addressing child components in styled-system/css
- [Discussion? 😺 ] Text transform - capitalize
- What's going to happen with this project? HOT 49
- Custom breakpoints are ignored when using system function HOT 1
- Sizes best practices HOT 1
- Using an alias key name for `space` HOT 3
- css module not linking theme colors for ::before pseudo element HOT 2
- Typescript `variants` type HOT 1
- alignItems media query not applying HOT 1
- TypeError: undefined is not an object (evaluating '_layout["default"].width')
- Variant for multi-elements
- Spacing type doesn't apply styled-components with props HOT 2
- Remove shorthand props HOT 3
- @styled-system/css Documentation Page Missing HOT 1
- Project continued HOT 5
- Your site redirects to github repo HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-system.