css - 如何设置嵌套元素的样式以与样式组件 react ？

Question

我正在使用样式化组件，并且想通过嵌套 css 在 div 内设置子元素的样式。查看我的演示 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>
  );
}

Answer 1

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

更改此:

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"
    }
  }
});

或者如果您不改变所有嵌套跨度

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

试试这个codesandbox https://codesandbox.io/s/vm3qnmj75l

供引用: http://cssinjs.org/jss-nested/