How to use the @storybook/theming.styled.td function in @storybook/theming

borderCollapse: 'collapse',
  borderLeft: '0px',
  borderRight: '0px',
});
const Thead = styled.thead(({ theme }) => ({
  textTransform: 'capitalize',
  color: '#ffffff', // theme.color.textInverseColor,
  backgroundColor: theme.color.darkest,
}));
const Tbody = styled.tbody();
const Th = styled.th({
  paddingTop: '.5rem',
  paddingBottom: '.5rem',
});
const Tr = styled.tr({});
const Td = styled.td(({ theme }) => ({
  color: theme.color.defaultText,
  paddingTop: '1rem',
  paddingBottom: '1rem',
  borderBottom: '1px solid #cccccc',
}));
const Name = styled.span({ fontWeight: 'bold' });
const Required = styled.span({ color: 'red' });

const PropRow = ({ row, propValOptions }) => (
  
    
      {row.property}
      {row.required ? * : null}
    
    
      {multiLineText(row.description)}

export const Thead = styled.thead();

export const Tbody = styled.tbody();

export const Th = styled.th(({ theme }) => ({
  paddingTop: '.5rem',
  paddingBottom: '.5rem',
  textTransform: 'capitalize',
  color: theme.color.lightest,
  backgroundColor: theme.color.darkest,
}));

export const Tr = styled.tr({});

export const Td = styled.td(({ theme }) => ({
  color: theme.color.darkest,
  paddingTop: '1rem',
  paddingBottom: '1rem',
  borderBottom: '1px solid #cccccc',
}));

import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { isNil } from 'lodash';
import { JsDocTags } from './PropDef';

interface PropJsDocProps {
  tags: JsDocTags;
}

const TBody = styled.tbody({ boxShadow: 'none !important' });

const Cell = { paddingTop: '0 !important', paddingBottom: '0 !important' };

const Name = styled.td({
  ...Cell,
});

const Desc = styled.td({
  ...Cell,
  width: 'auto !important',
});

export const PropJsDoc: FC = ({ tags }) => {
  if (isNil(tags)) {
    return null;
  }

  const params = (tags.params || []).filter(x => x.description);
  const hasDisplayableParams = params.length !== 0;
  const hasDisplayableReturns = !isNil(tags.returns) && !isNil(tags.returns.description);

const dynamicStyles = ({ bordered, code }) => ({
  ...(bordered ? { border: '1px solid #ccc' } : {}),
  ...(code
    ? {
        whiteSpace: 'nowrap',
        fontFamily: 'Monaco, Consolas, "Courier New", monospace',
      }
    : {}),
});

const styles = {
  padding: '2px 6px',
};

export const Td = styled.td(styles, dynamicStyles);
export const Th = styled.th(styles, dynamicStyles);

Td.displayName = 'Td';
Th.displayName = 'Th';

import { isNil } from 'lodash';
import { JsDocTags } from './PropDef';

interface PropJsDocProps {
  tags: JsDocTags;
}

const TBody = styled.tbody({ boxShadow: 'none !important' });

const Cell = { paddingTop: '0 !important', paddingBottom: '0 !important' };

const Name = styled.td({
  ...Cell,
});

const Desc = styled.td({
  ...Cell,
  width: 'auto !important',
});

export const PropJsDoc: FC = ({ tags }) => {
  if (isNil(tags)) {
    return null;
  }

  const params = (tags.params || []).filter(x => x.description);
  const hasDisplayableParams = params.length !== 0;
  const hasDisplayableReturns = !isNil(tags.returns) && !isNil(tags.returns.description);

  if (!hasDisplayableParams && !hasDisplayableReturns) {
    return null;
  }