css - react 和情感 : Specify font size

Question

我正在使用 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 样式中指定字体大小。

Answer 1

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

• 您正在传递 .p { ...在不是类选择器但应该是元素选择器的方程式中 p { ...
• 你的 react 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'

更新 2:

如果你不能使用 Vanilla 情感，那么你可以考虑使用以下:

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