Передайте таблицу стилей в качестве опоры для рендера в функциональном компоненте. - PullRequest
Новая
       11

Передайте таблицу стилей в качестве опоры для рендера в функциональном компоненте.

0 голосов
/ 17 октября 2019

Я использую 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 получать таблицу стилей, созданную другим компонентом?

1 Ответ

0 голосов
/ 17 октября 2019

Хотя это не является прямым решением проблемы, в Styled JSX есть псевдоселектор :global(), который выполняет конечную цель стилизации компонента, который выходит за рамки текущего компонента. Рабочий пример для данного кода:

src / pages / mypage / styles.css 

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

Вот что такое документация Next.js говорит для псевдоселектора :global():

Одноразовые глобальные селекторы

Иногда полезно пропустить область действия селекторов. Чтобы получить одноразовый глобальный селектор, мы поддерживаем: global (), вдохновленный css-модулями.

Это очень полезно, например, для генерации глобального класса, который вы можете передать третьемуКомпонентыНапример, чтобы стилизовать реагировать на выбор, который поддерживает передачу пользовательского класса через 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> )
...