React 和 Emotion：指定字体大小

Question

我正在使用 emotion 在我的 React 应用程序中设计和显示复利方程式。我的 render() returns 这个：

<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 样式中指定字体大小。

Answer 1

我注意到您的代码中存在一些问题。

您在等式中传递了 .p { ...，它不是 class 选择器，但应该是像 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

根据他们最新的 blog，您应该使用：

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

而不是import styled, { css } from 'react-emotion'

更新二：

如果不能使用原版情感，可以考虑使用以下：

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

根据他们documentation:

有两种方法可以开始使用 css 道具。

Babel 预设（不能在 Create-React-App 或 CodeSandbox 中使用）
JSX Pragma（这涉及将以上内容添加到代码行中）

我更新了相同的codesandbox：https://codesandbox.io/s/emotion-0z3vz

React 和 Emotion：指定字体大小

React and Emotion: Specify font size

css

emotion

reactjs