Пользовательский компонент не принимает стили реагируют на материал пользовательского интерфейса - PullRequest
Новая
       49

Пользовательский компонент не принимает стили реагируют на материал пользовательского интерфейса

0 голосов
/ 27 августа 2018

У меня есть Avatar Component, который я создал, это очень простой компонент, который отображает значок и некоторый текст. Это код для компонента. 

import React from "react";
import PropTypes from "prop-types";
import { withStyles, Avatar, Typography } from "@material-ui/core";
import avatar_placeholder from "../images/avatar_man.svg";

const styles = theme => ({
  row: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  avatar: {
    width: 50,
    height: 50,
    marginRight: "2%"
  },
  subtitle: {
    opacity: 0.5
  }
});

const customAvatar = props => {
  const { classes, name, subtitle } = props;

  return (
    <div className={classes.row}>
      <Avatar alt={name} src={avatar_placeholder} />
      <div>
        <Typography variant="title">{name}</Typography>
        <Typography variant="body2" className={classes.subtitle}>
          {subtitle}
        </Typography>
      </div>
    </div>
  );
};

customAvatar.propTypes = {
  classes: PropTypes.object.isRequired,
  name: PropTypes.string.isRequired,
  image: PropTypes.string,
  subtitle: PropTypes.string
};

customAvatar.defaultProps = {
  name: "John Doe",
  subtitle: ""
};

export default withStyles(styles)(customAvatar);

Компонент Avatar является дочерним компонентом родительского элемента, следующий код показывает, как компонент Avatar используется в родительском элементе. 

import React from "react";
import PropTypes from "prop-types";
import {
  withStyles,
  Card,
  CardContent
} from "@material-ui/core";
import AvatarProfile from "./AvatarProfile";

const styles = {
  cardContent: {
  },
  AvatarDiv: {
    backgroundColor: "red"
  }
};

const ItemCardWithCheckbox = props => {
  const { classes, name, subtitle } = props;

  return (
    <Card>
      <CardContent className={classes.cardContent}>
        <AvatarProfile
          name={name}
          subtitle={subtitle}
          className={classes.AvatarDiv}
        />
      </CardContent>
    </Card>
  );
};

ItemCardWithCheckbox.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(ItemCardWithCheckbox);

Как видите, я пытаюсь применить стиль AvatarDiv для компонента Avatar, т. Е. Я бы хотел, чтобы backgroundColor компонента Avatar был красным, но этого не происходит, я использую Материал UI . Я предполагаю, что либо реквизиты стиля не передаются должным образом компоненту Avatar, либо я неправильно применяю стиль.

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Я сделал его более читабельным и умным компонентом и использую один компонент стилей. Вот рабочие коды и коробка: https://codesandbox.io/s/ll507vypy7

0 голосов
/ 27 августа 2018

Вы передаете AvatarDiv как реквизит 'className'. Вы не применяете класс здесь, так как AvatarDiv - это пользовательский компонент. 

  <AvatarProfile
          name={name}
          subtitle={subtitle}
          className={classes.AvatarDiv}

Вы должны передать его как реквизит и использовать этот реквизит для применения стиля в дочернем компоненте. Я сделал что-то похожее в codeandbox, где я изменил цвет на оранжевый для кнопки и передал его как реквизит дочернему компоненту. Пожалуйста, проверьте - https://codesandbox.io/s/lyxz92m7nl

...