Реагируйте и эмоции: укажите размер шрифта - PullRequest
Новая
       9

Реагируйте и эмоции: укажите размер шрифта

1 голос
/ 08 октября 2019

Я использую emotion для стилизации и отображения уравнения для сложных процентов в моем приложении React. Мой render() возвращает это: 

<div css ={equation}>
  <p>
  P (1 +</p>
  <p css={fraction}>
    <span className="num">1</span>
    <span className="symbol">/</span>
    <span className="bottom">2</span>
  </p>
  )
   <sup>(nt)</sup>
</div>

И вне моего компонента у меня есть: 

const fraction = css`
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.0001em;
    text-align: center;

    .num {
      display: block;
      padding: 0;
      height: 12px;
      line-height: 12px;
    }

    .bottom {
      border-top: thin solid black;
    }

    .symbol {
      display: none;
    }
`
const equation = css`
font-size: 100%;
.p{
    font-size:large !important;
  }
`;

Фракция правильно оформлена. Однако я не могу изменить шрифт элементов p. Единственный способ получить это - переключить элементы p на h1 - но я не хочу этого делать. Я хочу иметь возможность указывать размер шрифта внутри моего стиля эмоции CSS.

1 Ответ

1 голос
/ 08 октября 2019

Есть несколько вещей, которые я заметил как проблема в вашем коде.

  • Вы передаете .p { ... в уравнении, которое не является селектором класса, но должно было быть селектором элемента, подобнымp { ...
  • Ваша реакция div должна использовать className, чтобы применить этот эффект

Вот изменения кода песочницы: https://codesandbox.io/s/emotion-xh53z?fontsize=14

Просто скопируйте сюда для справки: 

import React from "react";
import { render } from "react-dom";
import { css } from "react-emotion";

const fraction = css`
  display: inline-block;
  position: relative;
  vertical-align: middle;
  letter-spacing: 0.0001em;
  text-align: center;
  .num {
    display: block;
    padding: 0;
    height: 30px;
    line-height: 12px;
  }
  .bottom {
    border-top: thin solid black;
  }
  .symbol {
    display: none;
  }
`;

 // Notice the p inside the equation
const equation = css`
  p { 
    font-size: large !important;
  }
`;

// Rather than css={}, you should be using className={}
const App = () => (
  <div className={equation}>
    <p>
      P (1 +
      <p className={fraction}>
        <span className="num">1</span>
        <span className="symbol">/</span>
        <span className="bottom">2</span>
      </p>
      )<sup>(nt)</sup>
    </p>
  </div>
);

render(<App />, document.getElementById("root"));

Я также переместил закрывающий тег </p> в последний раз, чтобы убедиться, что он применяется согласно inline-block

Обновлено 1:

Вот последняя обновленная версия: https://codesandbox.io/s/emotion-1tjc7

Согласно их последнему блогу , вы должны использовать: 

import styled from '@emotion/styled'
import { css } from 'emotion'

вместо import styled, { css } from 'react-emotion'

Обновление 2:

Если вы не можете использовать ванильные эмоции, тогда вы можете использовать следующее: 

import styled from "@emotion/styled";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";

Согласно их документации :

Есть 2 способа начать работу с css prop.

  • BaBel Preset (не может использоваться в Create-React-App или CodeSandbox)
  • JSX Pragma (это включает просто добавление вышеупомянутых строк кода)

Я обновилодинаковые коды и коробки: https://codesandbox.io/s/emotion-0z3vz

...