Question

我创建了一个可重用的表（DataTable），可以将其导入包装器中并在包装器中使用：

import styles from './styles.scss';
function TableTest() {
  return (
    <DataTable
      columns={columns}
      data={data}
      withFirstAndLast
      defaultSortName="lastrefreshed"
      defaultSortOrder="asc"
      noDataText={noDataSign()}
      fullstyle={styles}
    />
  );
}

我希望其他人能够将自己的scss文件导入表中，以覆盖表的默认样式页。通过将scss文件的类名传递到原始表的div的类名中，可以实现这一点：

 render() {
    const classname = styles['datatable-container'];
    const classnameimport = this.styleimport['datatable-container'];
    console.log(classname, this.styleimport);
    return (
      <div className={classnameimport || classname}>

是否有更好的方法可以做到这一点？到目前为止还不是

Answer 1

CSS样式通常的工作方式是为元素分配固定的类名称。然后任何人都可以将该类名称添加到自己的CSS或SCSS文件中，以覆盖该元素上的样式。

如果要允许用户添加自己的类名，请添加一个className属性或类似内容。然后，用户将类名称作为道具传递给您的组件，并在其样式中使用相同的类名称。

您可以将scss文件作为道具传递给另一个React组件使用吗？

1 个答案: