Question

我有一个组件，该组件具有使用ListeItems和图标和按钮自定义的列表。我想在2个不同的地方使用此组件。在一个地方，我以这种方式设置MuiListItemTextTypography道具。

DECLARE
  dname      VARCHAR(15);
  mname      VARCHAR(20);
  sal        NUMBER(20);
  mid        NUMBER(20);
  row_worker worker%ROWTYPE;
  CURSOR work_cur(manid NUMBER) IS
    SELECT w.*
    FROM   worker  w,
           manager m
    WHERE  w.manager_id = manid
    AND    w.manager_id = m.manager_id;
BEGIN
  dname := '&dname';
  FOR x IN (SELECT m.department,
                   m.name,
                   m.salary,
                   m.manager_id
            FROM   manager m,
                   worker  w
            WHERE  m.department = dname
            AND    m.manager_id = w.manager_id)
  LOOP
    dbms_output.put_line('Department Name:' || x.department || '       Manager Name:' || x.name || '        Salary:' || x.salary);
    dbms_output.put_line('------------------------------------------------------------------------------');
    dbms_output.put_line('Worker_id    Name     Specialized_in     Salary       Join_date       Dept_name');
    dbms_output.put_line('------------------------------------------------------------------------------');

    OPEN work_cur(x.manager_id);
    FETCH work_cur
      INTO row_worker;
    --exit when work_cur%notfound;
    dbms_output.put_line('' || row_worker.worker_id || '    ' || row_worker.name || '   ' || row_worker.specialized_in || '     ' ||
                         row_worker.salary || '     ' || row_worker.join_date);
  END LOOP;
  dbms_output.put_line('------------------------------------------------------------------------------');
  --DBMS_OUTPUT.PUT_LINE(1/n)
  CLOSE work_cur;
END;
/

但是第二个组件希望字体大小为12像素，所以我这样做了

const theme = createMuiTheme({
.
.
.
typography: {
    useNextVariants: true
    body1: {
      fontSize: '14px'
    }
  },
props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body2"
      }
    }
  }
})

并将第二个组件包装在新主题中

const innerTheme = createMuiTheme({
  typography: {
    body1: {
      fontSize: '12px'
    }
  },
  props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body1"
      }
    }
  }
});

效果很好，但是缺点是当我将其包装在内部主题中时，我会丢失在主主题中设置的所有样式

如何做到这一点，这样我就不会在第一个主题中迷失一切。

Answer 1

这里有一个很好的示例：Nesting the Theme

MuiThemeProvider接受一个函数，因此您可以将innerTheme重新定义为：

const innerTheme = {
  typography: {
    body1: {
      fontSize: '12px'
    }
  },
  props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body1"
      }
    }
  }
}

然后将您的标记更改为：

<MuiThemeProvider theme={theme => createMuiTheme({...theme, ...innerTheme})}>
  <ListItems itemsList={secondItem}/>
</MuiThemeProvider>

当我们想要拥有不同的primaryTypographyProps时，可以替代innerTheme

1 个答案: