Вложенные эмоции 10 классов для каскада - PullRequest
Новая
       18

Вложенные эмоции 10 классов для каскада

0 голосов
/ 08 февраля 2019

Ранее в Emotion 9 вы могли использовать имена классов Emotion, чтобы использовать преимущества каскада.Вы должны заключить эмоцию в фигурные скобки и поставить перед ней точку, а затем знак доллара.Например, вы могли бы сделать это: 

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  .${child} {
    color: yellow;
  }
`;

<div className={parent}>I am red</div>
<div className={child}>I am green</div>
<div className={parent}>
  <div className={child}>I am yellow</div>
</div>

Как я могу добиться такого поведения в Emotion 10?Это мой вопрос.

Ниже приведена дополнительная информация о том, что происходит, когда вы не используете знак доллара.

Теперь следующее было и желательно: еслипериоды не используются в Emotion 9 или 10, родительский const наследует вложенные стили const.И, кроме того, если этот вложенный const имеет переопределенные стили, они в конечном итоге будут наследоваться родителем. 

const child = css`
  color: green;
`;
const parent = css`
  color: red;
`;
<div className={parent}>I am red</div>
<div className={child}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  ${child}
`;
<div className={parent}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  ${child} {
    color: yellow;
  }
`;
<div className={parent}>I am yellow</div>

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  ${child}
`;
<div className={parent}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  ${child} {
    color: yellow;
  }
`;
<div className={parent}>I am yellow</div>

1 Ответ

0 голосов
/ 12 февраля 2019

Следующее будет работать, оно просто не работает в CodePen, так как выходной код содержит больше текста, и он снова хэширует имена констант.Но если вы тестируете в своей собственной кодовой базе, это работает.Мне не нравится делать это, входить в объект, чтобы получить имя, это кажется хакерским.Хотелось бы, чтобы у Emotion было что-то особенное для этих случаев. 

const cat = css`
  color: red;
`;
const dog = css`
  color: green;
  .css-${cat.name} {
    border-bottom: 1px solid currentColor;
  }
`;
...