Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Summary
I would like Flowbite Tabs component to respect the established styling related properties from native html elements, namely "style" and "className".
In the case of the Tabs component, the "style" html property is Omitted in favor of Flowbite React's own style attribute:
export interface TabsProps extends Omit<ComponentProps<'div'>, 'ref' | 'style'> {
onActiveTabChange?: (activeTab: number) => void;
style?: keyof TabStyles;
theme?: DeepPartial<FlowbiteTabsTheme>;
}
Unnecessary styling solution narrowing
I think this is an unnecessary narrowing of the component interface. Tabs is still exposing className so why can't we apply styles through the native style-property?
Eslint problem
<Tabs style="underline"/>
also results in
Style prop value must be an object eslint[react/style-prop-object](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/style-prop-object.md)
Codebase cleanliness
In my codebase I am wrapping each Flowbite component and disabling className and style properties with a utility type so that other developers in the company don't override our style system. The Tabs component's style property not being of type React.CSSProperties causes unnecessary complications in this pattern.
Proposed solution
Stop omitting 'style' from the Tabs component interface and rename the current style-property to something else.