Как применить стили со стилевыми компонентами к компоненту, заключенному в сетку пользовательского интерфейса материала? - PullRequest
Новая
       23

Как применить стили со стилевыми компонентами к компоненту, заключенному в сетку пользовательского интерфейса материала?

0 голосов
/ 14 апреля 2019

У меня есть этот компонент нижнего колонтитула, где возвращается элемент Grid пакета material-ui с идентификатором для применения правил scss.Сейчас используется таблица стилей scss

Footer.scss 

#footer__wrapper {
  width: 100%;
  padding: 3%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

Footer.js 

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";
import "components/layout/Footer/Footer.scss";

const Footer = props => {
  const { palette } = props.theme;

  return (
    <Grid
      container
      id="footer__wrapper"
      style={{ backgroundColor: palette.primary.dark }}
    >
      <Grid item>
        <Typography
          variant="h5"
          style={{ color: palette.secondary.contrastText }}
        >
          Footer - Navigational links
        </Typography>
      </Grid>
    </Grid>
  );
};

const styles = {};

export default withStyles(styles, { withTheme: true })(Footer);

Дело в том, что теперь я хочу избавиться от таблицы стилей scss и преобразовать ее в style-component , но я не смог этого добиться.Я избавился от файла scss и попытался использовать метод styled () из styled-components , чтобы определить правила без успеха

Footer.js 

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";
import styled from "styled-components";

const Footer = props => {
  const { palette } = props.theme;

  return (
    <Grid container style={{ backgroundColor: palette.primary.dark }}>
      <Grid item>
        <Typography
          variant="h5"
          style={{ color: palette.secondary.contrastText }}
        >
          Footer - Navigational links
        </Typography>
      </Grid>
    </Grid>
  );
};

const StyledFooter = styled(Footer)`
  width: 100%;
  padding: 3%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
`;

const styles = {};

export default withStyles(styles, { withTheme: true })(StyledFooter);

После этих изменений нижний колонтитул теряет свой стиль и правила не применяются.Любые идеи о том, как добиться того, что я хочу, и объединить эти два вместе?Я попробовал пункт 2) здесь , но он не работает.Спасибо !!

...