Style in React Toolbar component
30 Jan 20231 minute to read
The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference.
Customizing Toolbar
Use the following CSS to customize the Toolbar.
.e-toolbar {
border: 5px solid rgb(173, 255, 47);
}
Customizing the Toolbar items
Use the following CSS to customize the items of Toolbar.
.e-toolbar .e-toolbar-item {
background: #add8e6;
border: 1px solid #5a70cc;
}
Use the following CSS to customize the button in the items of Toolbar.
.e-toolbar .e-tbar-btn {
background: #add8e6;
border: 1px solid #5a70cc;
}
Customizing Toolbar’s item icon
Use the following CSS to customize the item icon of Toolbar control.
.e-toolbar .e-tbar-btn .e-icons {
background: #185655;
color: #d7f9d4;
}
Customizing the hover state of Toolbar control
Use the following CSS to customize the toolbar item when hovering.
.e-toolbar .e-tbar-btn:hover {
background: #c0e3a1;
border: 1px solid green;
}
Customizing selected item of Toolbar control
Use the following CSS to customize the selected toolbar item.
.e-toolbar .e-tbar-btn:focus {
background: #add8e6;
border: 1px solid #5a70cc;
}