CODEWITHSUNDEEP
reactjsnextui
Bruno Ramos
Bruno Ramos

Reputation: 29

How to change the background color of the input in NextUI

I'm trying to change the background color of the Input component from NextUI. I already tried to use styled attribute but no luck.

What can I do?

Upvotes: 1

Views: 6489

Answers (2)

Jerson David Betin Pantoja
Jerson David Betin Pantoja

Reputation: 1

You can change background with prop classnames and edit input json

import { Input } from "@nextui-org/react";

<Input
 type="email"
 label="Email"
 classNames={{ input: 'bg-red-400' }}
/>

Upvotes: 0

Junior Garcia
Junior Garcia

Reputation: 19

You can change the background color of the input using the css property and modifying the $$inputColor variable, as follows:

import { Input } from "@nextui-org/react";

export default function App() {
  return <Input placeholder="Next UI" css={{ $$inputColor: "#330025" }} />;
}

Here's a Codesandbox -> https://codesandbox.io/s/nextui-input-custom-background-5d83on?file=/App.js:0-154

Upvotes: 1

Related Questions