[@billboard.js/react] Possible enhancements to facilitate CSS-in-JS styling for a chart in React

[BillionaireDY]

Description

I want to style the <div class="bb" /> that is created when initializing a chart. However, when using CSS-in-JS libraries like styled-components or emotion, there are cases where .css files are not used. In such cases, I need to either inline style the div using the style attribute or style it using the following approach:

<BillboardJS style={...some styles} />
// or
const StyledBillboardJS = styled(BillboardJS)`
  ...some styles
`;

However, since the IProp interface does not have style or className properties for the div element, it can be challenging to style it using CSS-in-JS. Therefore, it would be beneficial to add the className and style properties to the IProp interface. One way to achieve this is by extending the interface with the Pick keyword, picking className and style from the HTMLProps<HTMLDivElement> interface as shown below:

export interface IProp extends Pick<HTMLProps<HTMLDivElement>, 'className' | 'style'> {
  bb: typeof bb;
  options: ChartOptions;
}

With this modification, it seems that styling will be easier and more straightforward when using CSS-in-JS. Thank you for using our great library.👍 Appreciate your feedback and review.🥰

Steps to check or reproduce

describe all above