Question

如果重要的话，我正在使用Next.js，React，Styled JSX和Postcss。我需要为特定页面设置导入组件的样式。由于样式表是在渲染时为特定组件创建的，所以我认为我可以将组件的自定义样式与页面特定的资源一起放入并传递给他们。但是我遇到了以下错误：

Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got MemberExpression

我在两个单独的目录和文件中有两个功能渲染器，一个渲染页面，另一个渲染组件：

src/pages/mypage/
    index.js
    styles.css
    myComponentStyles.css
src/components/MyComponent
    index.js
    styles.css

请记住，文件/目录引用不是从我的环境中镜像的，因为这不是问题，这是我的代码：

src / pages / mypage / index.js

import MyComponent from '../../components/MyComponent'
import styles from './styles.css'
import MyComponentStyles from './myComponentSyles'

const MyPage = () => {
  return (
    <div className="my-page-container">
      <style jsx>{styles}</style>
      <MyComponent styles={MyComponentStyles} />
    </div>
  )
}

export default MyPage

src / components / MyComponent / index.js

import styles from './styles.css'

const myComponent = props => {
  return (
    <>
      <style jsx>{styles}</style>
      <style jsx>{props.styles}</style>
      <div className="my-component-main-container">MyComponent</div>
    </>
  )
}

export default MyComponent

我如何允许MyComponent接收由另一个组件生成的样式表？

Answer 1

尽管这不是直接解决问题的方法，但是Styled JSX具有:global()伪选择器，该伪选择器实现了对超出当前组件范围的组件进行样式设置的最终目标。给定代码的有效示例是：

src / pages / mypage / styles.css

.my-page-container :global(.my-component-main-container){
  color: white;
}

这是Next.js documentation对:global()伪选择器的说明：

一次性全局选择器

有时，跳过选择器作用域很有用。为了得到一个   我们支持的一次性全局选择器：global（），受css-modules启发。

这对于例如生成全局类非常有用   您可以传递给第三方组件。例如，要样式   react-select支持通过传递自定义类   optionClassName：
import Select from 'react-select'

export default () => (
  <div>
    <Select optionClassName="react-select" />
    <style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */

      div :global(.react-select) {
        color: red
      }
    `}</style>
  </div> )

传递样式表作为功能组件中的渲染的道具

1 个答案:

一次性全局选择器