Блог

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

 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 во внешний компонент Card. Тем не менее, я вижу в инструментах разработки, что в заголовок добавлен элемент style, но кажется, что внутри него есть текст, а не стили, а именно, синтаксис внутри него не выделен. В результате стили не применяются.

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

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

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

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

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

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

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