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

我正在使用Next.js、React、样式化的JSX和postss，如果这很重要的话。我需要为特定页面设置导入组件的样式。由于样式表是在呈现时为特定组件创建的，所以我想我可以将该组件的自定义样式与特定于页面的资源放在一起，并将它们传递进来。但我得到了以下错误：

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

src/components/MyComponent/index.js

---

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

尽管这不是问题的直接解决方案，但Styled JSX有一个：global伪选择器，它实现了设置当前组件范围之外的组件样式的最终目标。给定代码的工作示例如下：

src/pages/mypage/styles.css

下面是Next.js对：全局伪选择器的说明：

一次性全局选择器 有时跳过选择器的作用域是很有用的。为了得到一个 我们支持的一次性全局选择器：全局，灵感来自css模块

例如，为了生成一个全局类，这是非常有用的 可以传递给第三方组件的。例如，要设计样式 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> )

---

您是否尝试过：{@import./styles.css；}@SteveHolgado如果您指的是MyComponent，则正常样式导入工作正常。如果是这样的话，我编辑了我的问题以澄清问题。但是，如果您要将样式从scr/pages/mypage/myComponentStyles.css直接导入MyComponent函数，那就行不通了。这将无法使组件加载传递给它的样式。

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

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

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

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> )