Question

我将按照此处的示例[1]使用Material-UI创建自定义主题。在App.js [2]的第10行中，它引用了color="textSecondary"，有人可以解释值textSecondary的来源吗？

我能够使用以下示例进行工作：
style={{ color: theme.palette.secondary.light }}
但我希望能够使用较短的语法参考。

下面的完整App.js代码：

import React from 'react';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import ProTip from './ProTip';
import Link from '@material-ui/core/Link';

import theme from './theme';

function MadeWithLove() {
  return (
    <Typography variant="body2" style={{ color: theme.palette.secondary.light }} align="center">
      {'Built with love by the '}
      <Link color="inherit" href="https://material-ui.com/">
        Material-UI
      </Link>
      {' team.'}
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Create React App v4-beta example
        </Typography>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}

我的theme.js文件是：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#6fbf73',
      main: '#4caf50',
      dark: '#357a38',
      contrastText: '#fff',
    },
    secondary: {
      light: '#5464c0',
      main: '#2a3eb1',
      dark: '#1d2b7b',
      contrastText: '#000',
    },
  },
});

export default theme;

[1] https://github.com/mui-org/material-ui/tree/master/examples/create-react-app

[2] https://github.com/mui-org/material-ui/blob/master/examples/create-react-app/src/App.js#L10

Answer 1

如果您查看documentation for Typography component，则可以为color道具提供几种选择：

name: color
type: enum: 'initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error'
default: 'initial'
description: The color of the component. It supports those theme colors that make sense for this component.

textSecondary在这里定义：https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Typography/Typography.js#L92为

theme.palette.text.secondary

Answer 2

这是Material-ui中默认的palette.primary他们

primary:{
    light: "#7986cb"
    main: "#3f51b5"
    dark: "#303f9f"
    contrastText: "#fff"
}

每当您将'primaryText'放在颜色变化的材质ui上时，主题中的contrastText道具都会出现，但是primaryText只是传递给多个组件（即印刷术）的选项，实际上并不是不是theme对象的一部分

为Material-UI

2 个答案: