Question

我有这个Footer组件，其中Material-ui包的Grid元素返回了一个ID，以应用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-components 中的styled（）方法来定义规则

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）here，但它不起作用。谢谢！

如何将带有样式组件的样式应用于包裹在材料UI网格中的组件？

0 个答案: