astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

fix: css template function should return Record type #753

Open anran758 opened 7 months ago

anran758 commented 7 months ago

After using the astroturf css template function, we noticed that the actual output in our code is an object rather than a string.

import {css} from 'astroturf'

const styles = css`
  .button {
    padding-top: 16px;
    padding-left: 0;
  }

  .product :global(.ant-form-item-label) {
    flex-basis: auto !important;
  }
`

export default function ProductList(props) {
  console.log('styles -->', styles);
  // other code...

  return (
    <FileUpload
      key={record.id}
      accept=".csv"
      buttonProps={{
        type: 'link',
        loading: isPendingImport,
        className: styles.button,
      }}
      icon={false}
    />
  );
}
image

Therefore, it's necessary to adjust the return type of the css template function.