如何在react中设置嵌套元素的样式? [英] How to style nested elements in react?

问题描述

我正在使用样式化的组件，并希望通过嵌套的CSS在div内为孩子设置样式.在此处

I'm using styled components and would like to style a child inside a div via nested css. See my demo here

const styles = theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing.unit,
    ">span": {
      background: "red"
    }
  }
});

function TypographyTheme(props) {
  return (
    <div className={props.classes.root}>
      <h1>
        <span>{"This div's text looks like that of a button."}</span>
      </h1>
    </div>
  );
}

推荐答案

它看起来像JSS语法，而不是样式化的组件.

It looks like JSS syntax, not styled component.

更改此:

const styles = theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing.unit,
    ">span": {
      background: "red"
    }
  }
});

与此:

const styles = theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing.unit,
    "& span": {
      background: "red"
    }
  }
});

或者，如果您不愿意，则更改所有嵌套的跨度

or if you wouldn't that change all nested spans

const styles = theme => ({
  root: {
    ...theme.typography.button,
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing.unit,
    "& > h1 > span": {
      background: "red"
    }
  }
});

尝试使用此codeandbox https://codesandbox.io/s/vm3qnmj75l

Try this codesandbox https://codesandbox.io/s/vm3qnmj75l

供参考: http://cssinjs.org/jss-nested/

这篇关于如何在react中设置嵌套元素的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！