Skip to content

Customizing Components

Every component is highly customizable. Every component can be changed to the way you'd like, it can be invoked with different props, and it can be styled with your own CSS.

Customizing props of a component

For example, adding a placeholder to the Input component:

<Form.Input placeholder="Enter your name" />

input

Customizing CSS of a component

For example, you can change the color of a button component in two ways:

Using a CSS class:

<Button className="green">
    Click me
</Button>

.green {
    background: #91D564;
}

green button

Using JSX styling:

<Button style={{ backgroundColor: "#91D564" }}>
    Click me
</Button>

green button

As you can see, every prop or style you add to a component will be added to the component's element. For example, if you add a className prop to a Button component, it will be added to the button element. No matter what you add, it will be added to the component's element. This is how you can customize components.