Utilizing React with Emotion to Customize Font Sizes

Question

Utilizing React with Emotion to Customize Font Sizes

In my React app, I am using emotion to style and display the formula for compound interest. Within my render() method, I am returning the following:

<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>

Additionally, outside of the component I have defined the following:

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;
  }
`;

While the fraction styling is working as expected, I am encountering issues with changing the font size of the p elements. I have tried various methods, including using the font-size property within the emotion css styling, but so far have been unsuccessful. I managed to change the font size by switching p to h1 elements, but I would prefer to find a solution that allows me to specify the font size within the emotion styling for p elements.

css reactjs emotion

Answer 1

Answer №1

I have identified a couple of issues in your code that need to be addressed:

The use of .p { ... inside the equation is incorrect; it should be an element selector like p { ...
Your react div requires the use of className to apply the desired effect

Below are the updated code changes in the sandbox: https://codesandbox.io/s/emotion-xh53z?fontsize=14

Here's the updated code for your reference:

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;
  }
`;

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

// Use className={} instead of css={}
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"));

The closing </p> tag has been moved to ensure proper application with inline-block

Update 1:

Check out the latest updated version here: https://codesandbox.io/s/emotion-1tjc7

Following their latest blog, you should use:

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

instead of

import styled, { css } from 'react-emotion'

Update 2:

If you are unable to use vanilla emotion, consider the following alternative:

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

According to their documentation:

There are two ways to get started with the css prop.

Babel Preset (Not usable in Create-React-App or CodeSandbox)
JSX Pragma (Just add the specified lines of code)

The codesandbox has also been updated: https://codesandbox.io/s/emotion-0z3vz

Answer 2

I have identified a couple of issues in your code that need to be addressed:

The use of .p { ... inside the equation is incorrect; it should be an element selector like p { ...
Your react div requires the use of className to apply the desired effect

Below are the updated code changes in the sandbox: https://codesandbox.io/s/emotion-xh53z?fontsize=14

Here's the updated code for your reference:

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;
  }
`;

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

// Use className={} instead of css={}
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"));

The closing </p> tag has been moved to ensure proper application with inline-block

Update 1:

Check out the latest updated version here: https://codesandbox.io/s/emotion-1tjc7

Following their latest blog, you should use:

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

instead of

import styled, { css } from 'react-emotion'

Update 2:

If you are unable to use vanilla emotion, consider the following alternative:

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

According to their documentation:

There are two ways to get started with the css prop.

Babel Preset (Not usable in Create-React-App or CodeSandbox)
JSX Pragma (Just add the specified lines of code)

The codesandbox has also been updated: https://codesandbox.io/s/emotion-0z3vz

Utilizing React with Emotion to Customize Font Sizes

Answer №1

Similar questions

Tips for showcasing a complete background image in a div even if the content inside is minimal

Navigating the maze of Material UI in React with TypeScript

What causes offsetHeight to be less than clientHeight?

Issues arise when implementing a sticky position using CSS with incomplete functionality

Content does not display within a list element (ul)

Navigate between pictures using hover in jQuery

The transformOrigin property of the MUI popover does not seem to be functioning as expected

Tips for customizing the color of icons in material UI

The concealment of the container is ineffective when attempting to hide it until all cached images are

Error Alert: Attempting to access the 'prototype' property of an undefined value has resulted in a TypeError after switching to react-scripts version 4.0.3

Applying a CSS class to a newly generated row with JavaScript

CSS Techniques for Smooth Transitions

What is the best way to hide the jQuery modal I created?

The page background appears to be incomplete in its coloring

Mini-navigation bar scrolling

How to Stop Fixed Elements in iOS from Zooming

Verify the version of NextJs the project is built on

Incorporating an HTML Canvas element within a CSS grid design

Incorporate my personal design flair when utilizing third-party React.js component libraries

Implement variable tailwind styling in a react component using Next.JS, Tailwind, and TypeScript