Transparent background rendering globally on all { Button } components #1082
oconnorjohnson
started this conversation in
Feedback
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
For some reason, I am unable to change the background color of any of my buttons. When I follow the instructions of the NextUI documentation,
<Button color=$pink800>Log In</Button>
, nothing happens. When I use<Button css={{ color: '$pink800', background: '$blue800' }}
I can change the font color but not the button color. In all other aspects, my NextUI components and styling are working fine. It is only on the Button components, and it is happening on all pages within the Nextjs app. I am using the latest Next13 release, sans experimental app directory as this is headed to production.My globals.css page contains only the necessary dependency references and has no other global stylings. I have yet to set up a custom NextUI theme in the _app.jsx page.
Here is a sample of code that is returning a working button with large, pink text and a transparent background:
`const GetNabu = () => {
return (
<Button auto
css={{
color: '$pink800',
background: '$blue800',
fontSize: '$lg'
}}
>
Get Nabu
)
}`
Any help is greatly appreciated. I realize NextUI is still in beta, I had started the project before being authorized for production and was excited to try NextUI. I don't want to change UI component libraries, but I need to get my buttons to work haha.
Let me know what other information I can provide to give clarity on the problem I'm facing with my current code base. I understand what I've posted is limited! I didn't want to provide too much.
Beta Was this translation helpful? Give feedback.
All reactions