Function ThemeColorsTable

docs/src/components/ThemeColorsTable.tsx:108–140

({
  themeColorsData,
  componentName,
}: {
  themeColorsData: DataObject;
  componentName: string;
})

};

const ThemeColorsTable = ({
  themeColorsData,
  componentName,
}: {
  themeColorsData: DataObject;
  componentName: string;
}): ReactNode | null => {
  const uniqueKeys = getUniqueNestedKeys(themeColorsData);
  const nestingLevel = getMaxNestedLevel(themeColorsData);
  const isFlatTable = nestingLevel === 1;

  const Table = isFlatTable ? FlatTable : TabbedTable;

  return (
    <>
      <Table themeColorsData={themeColorsData} uniqueKeys={uniqueKeys} />
      <Admonition type="tip">
        <p>
          If a dedicated prop for a specific color is not available or the{' '}
          <code>style</code> prop does not allow color modification, you can
          customize it using the <code>theme</code> prop. It allows to override
          any color, within the component, based on the table above.
        </p>
        <p>
          <i>Example of overriding </i>
          <code>primary</code>
          <i> color:</i>
        </p>
        <code>{`<${componentName} theme={{ colors: { primary: 'green' } }} />`}</code>
      </Admonition>
    </>
  );
};

export default ThemeColorsTable;