Colors in SX prop styles not populating correctly
See original GitHub issueI’ve wrapped my application in the theme provider and am using the jsx pragma in my components. Despite this, I am unable to utilize colors within my theme configuration.
Main App:
import { ThemeProvider } from 'theme-ui'
import theme from '../src/theme'
import dynamic from 'next/dynamic'
import Header from '../components/layout/Header'
const Footer = dynamic(() => import('../components/layout/Footer'), { ssr: false })
function ConciseStudio({ Component, pageProps }) {
return(
<ThemeProvider theme={theme}>
<Header/>
<Component {...pageProps} variant={theme.styles}/>
<Footer/>
</ThemeProvider>
)
}
export default ConciseStudio
My theme colors:
colors: {
text: '#181818',
background: '#fff',
primary: '#181818',
secondary: '#CC008A',
tertiary: '#4d4d4d',
muted: '#f2f2f2'
},
Example component:
/** @jsx jsx */
import { jsx } from 'theme-ui'
export default function Header() {
const headerStyles = {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '80px',
background: 'primary'
}
return(
<div sx={headerStyles}>
<p>stuff</p>
</div>
)
}
In my browser, I see this:
Am I doing something incorrectly here, or is this a bug? I’m using the latest version of NextJS.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
The `sx` Prop - Theme UI
The sx prop lets you add any valid CSS to an element, while using values from your theme to keep styles consistent. You...
Read more >Why is sx props unable to access theme object?
In this case, the Header component is not getting the primary color because the color: white; rule (this line) is targeting the anchor...
Read more >The sx prop - MUI System
The sx prop is a shortcut for defining custom styles that has access to the theme. The sx prop lets you work with...
Read more >Color Mode - Chakra UI
To get dark mode working correctly, you need to do two things: Update your theme config to determine how Chakra should manage color...
Read more >Input Components - React-admin - Marmelab
Tip: Use the sx prop rather than className to style the component. defaultValue. Value of the input if the record has no value...
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
Oh yeah, that’s a thing that could help you, @joniler. Try
backgroundColor
orbg
.I checked my repro right now, and it works properly.
Obviously, I didn’t take a screenshot, but I could swear it didn’t work when I posted my last comment 😕
colors
were missing from the context 😢@atanasster right you are my friend. Thanks again for the help!