styled-jsx - возможно ли определить правила CSS без имени класса и почему динамически разрешенные стили не работают? - PullRequest
Новая
       36

styled-jsx - возможно ли определить правила CSS без имени класса и почему динамически разрешенные стили не работают?

0 голосов
/ 28 марта 2019

У меня есть следующий код: 

import React from 'react';
import MainTemplate from '../components/MainTemplate';
import { H1, Card } from '@blueprintjs/core';
import css from 'styled-jsx/css';

export default () => {
    const { className, styles } = css.resolve`
     { color: red; }
    `;
    return (
        <MainTemplate>
            {styles}
            <Card className={className}>
                <H1>Some header text!</H1>
            </Card>
        </MainTemplate>
    )
}

Как видите, я хочу передать className внешнему компоненту карты. Тем не менее, я вижу в инструментах разработчика, что к голове добавлен элемент стиля, но кажется, что внутри него есть текст, а не стили, то есть синтаксис внутри него не выделен. В результате стили не применяются.

Так мне интересно, что я не так? Я использую тег разрешения, как сказано в документации .

Также мне интересно, возможно ли определить стили для элемента без указания конкретного имени тега или имени класса?

Я использую next.js, а стили не применяются ни в dev, ни в рабочем режиме.

1 Ответ

0 голосов
/ 29 марта 2019

Оказалось, что я просто использовал неподходящее правило css для тестирования - color переопределяется стилями H1, поэтому я не увидел эффекта. Если я использую width или height, это работает хорошо. Так что это была только моя ошибка.

Что касается второго вопроса, он работает хорошо без конкретного тега или класса. Даже не нужно добавлять круглые скобки, то есть следующий код 

const { className, styles } = css.resolve`height: 100%;`;
return (
    <MainTemplate>
        {styles}
        <Card className={className}>
            <H1>Плееры</H1>
        </Card>
    </MainTemplate>
)

тоже хорошо работает.

...