Где определяется свойство цвета при создании пользовательской темы для Material-UI

Question

Я следую приведенному здесь примеру [1], чтобы создать собственную тему с помощью Material-UI.В строке 10 в App.js [2] он ссылается на 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

Если вы посмотрите документацию для Typography компонента , вы можете предоставить несколько опций для color prop:

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

Вот значение по умолчанию palette.primary их из material-ui

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

Всякий раз, когда вы помещаете 'primaryText' в цветной вариант материала, пользовательский интерфейс будет выглядеть как contrastText в вашей теме, но primaryText это просто опция, передаваемая нескольким компонентам (например, типография), она на самом деле не является частью theme объекта