React and Emotion: Specify font size - css

I am using emotion to style and display the equation for compound interest in my React app. My render() returns this:
<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>
And outside of my component I have:
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;
}
`;
The fraction is correctly styled. However, I cannot get the font of the p elements to change. The only way I got it to was by switching the p to h1 elements - but I don't want to do that. I want to be able to specify the font size inside my emotion css styling.

There are a couple of things I noticed as an issue in your code.
You are passing .p { ... inside the equation which is not a class selector but should have been an element selector like p { ...
Your react div has to use a className in order to make that effect applied
Here is the sandbox code changes: https://codesandbox.io/s/emotion-xh53z?fontsize=14
Just copying here 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;
}
`;
// 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"));
I also moved the closing </p> tag at the last to ensure it's getting applied as per inline-block
Updated 1:
Here is the latest updated version: https://codesandbox.io/s/emotion-1tjc7
As per their latest blog you should be using:
import styled from '#emotion/styled'
import { css } from 'emotion'
instead of import styled, { css } from 'react-emotion'
Update 2:
In case you cannot use vanilla emotion, then you can consider using the following:
import styled from "#emotion/styled";
/** #jsx jsx */
import { css, jsx } from "#emotion/core";
According to their documentation:
There are 2 ways to get started with the css prop.
Babel Preset (Can't use in Create-React-App or CodeSandbox)
JSX Pragma (This involves to just add the above to lines of code)
I have updated the same codesandbox: https://codesandbox.io/s/emotion-0z3vz

Related

React component class styles not getting applied

I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.

React popup display:none to display:block

I have a problem with CSS or somethings
I want to click at the profile to show a popup "logout" but it doesn't show anything.
At first, I thought there is a mistake at my CSS, but I searched many times for this solution but it still doesn't work.
import React,{useRef,useEffect} from 'react'
const profileActionRef = useRef(null)
const toggleProfileActions = () => profileActionRef.current.classList.toggle('show__popup')
<div className='profile'>
<motion.img
whileTap={{scale:1.2}}
src={userlogo}
alt=''
onClick={toggleProfileActions}
/>
<div className="profile__actions"
ref={profileActionRef}
onClick={toggleProfileActions}>
{ currentUser ? (<span onClick={logout} >Logout</span> ):( <div>
<Link to='/signup'>Sigup</Link>
<Link to='/login'>Login</Link>
</div>)
}
</div>
</div>
my CSS
.nav__icons .profile .profile__actions{
position: absolute;
top: 98%;
left: 0;
width: 150px;
z-index: 10;
padding: 15px;
display: flex;
align-items: center;
flex-direction: column;
background: var(--card-bg-01);
line-height: 30px;
cursor: pointer;
display: none;
}
.show__popup{
display: block;
}
I have no idea how to fix this. If you can tell me how to fix this it will helpful.
It's not a react issue, it's a css issue: your first css selector is more precise, it has a weight of 3 (https://specificity.keegan.st/), but the .show__popup has a weight of only 1 since it's only a single class. So it's apply before the first selector and the display is erased.
To fix that you can add more weight to your second selector:
.nav__icons .profile .profile__actions .show__popup

How to add a margin to an inner Angular Component using the CSS of the component that includes it

One can see in the example https://material.angular.io/components/expansion/examples that material components can be styled using the CSS of the component that includes them:
.example-headers-align .mat-form-field + .mat-form-field {
margin-left: 8px;
}
When trying to add a right margin to my-own-component with:
.example-headers-align .my-own-component {
margin-right: 8px;
}
Nothing happens :( Is the above wrong?
A small example of the question above consists of:
Included component my-own-component.component.html:
<mat-chip-list>
<mat-chip color="primary" selected>Running</mat-chip>
</mat-chip-list>
Parent component my-panel.component.html:
<mat-expansion-panel class="example-headers-align">
<mat-expansion-panel-header>
<mat-panel-title><strong>System 123</strong></mat-panel-title>
<mat-panel-description>
22 queues, 2 nodes
</mat-panel-description>
<my-own-component></my-own-component>
</mat-expansion-panel-header>
More details here ...
</mat-expansion-panel>
... and the style customization for the parent component my-panel.component.css:
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
align-items: center;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
}
.example-headers-align {
margin: 1rem;
}
.example-headers-align .my-own-component {
margin-right: 3rem;
}
No margin gets applied as seen on
For more details the codebase is available from https://github.com/adelinor/add-margin-example#setup-steps-and-margin-display-issue
Thanks in advance
Try adding the styles in the root file styles.css
I've found that when adding components with classes not directly in the html template, adding them in the global styles.css gets it working
Try
.example-headers-align { position: relative;}
.example-headers-align .my-own-component {
margin-right: 8px;
position: absolute;
}

Is there a way to style an element in React using the ID without using className?

I am converting an old website into React, and do not want to have to change all the CSS files that were previously coded. A lot of elements have their styles set currently by using an id. Is there a way to get className={styles["#topBar"]} to set the style correctly without having to delete the # and replacing it with a . in the CSS folder?
Since you are using CSS Modules you need to access the styles slightly differently. You need to import styles from 'Component.module.css'; and then declare your styles by referencing this imported object styles.MyClass or in your case since you have hyphens you need to use bracket notation styles["top-bar"]
Here is a working sandbox
//MyComponent.js
import styles from "./MyComponent.module.css";
export default function MyComponent() {
return (
<div id={styles["top-bar"]}>
<h2>My Component</h2>
<InnerComponent id="inner" />
</div>
);
}
function InnerComponent({ id }) {
return (
<div id={styles[id]}>
<h3>Inner Component</h3>
<p id={styles.para}>Styled Paragraph</p>
</div>
);
}
//MyComponent.module.css
#top-bar {
width: 90vw;
margin: 1rem auto;
padding: 1rem;
text-align: center;
background-color: LightPink;
}
#inner {
background-color: LightBlue;
text-align: left;
}
#para {
color: red;
}
Here's a quick snippet showing it working with IDs.
function MyComponent() {
return (
<div id="top-bar">
<h2>My Component</h2>
<InnerComponent id="inner" />
</div>
)
}
function InnerComponent({id}) {
return (
<div id={id}>
<h3>Inner Component</h3>
</div>
)
}
ReactDOM.render(<MyComponent />, document.getElementById('App'));
#top-bar {
width: 90vw;
margin: 1rem auto;
padding: 1rem;
text-align:center;
background-color: LightPink;
}
#inner {
background-color: LightBlue;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="App"></div>

ReactJS: how put my floatting element -textB- and my initial's placed text -textA- on the same baseline?

here the demo: https://stackblitz.com/edit/react-i8c9en
I would the two text to be on the same baseline. I have tried to play with vertical-align and other properties and so far I fail to achieve a same-baseline's rendering.
class App extends React.Component {
render() {
return (
<div className="component">
<h3
className="text_a"
>
textA{" "}
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.component {
text-align: center;
padding: 50px;
}
.text_a {
font-size: 5em;
}
.text_b {
/* width:100%; */
float: right;
/* position:absolute; */
right: 3vw;
/* margin-right:5vw; */
/* margin-top:7.5vh; */
/* position:relative; */
/* float:right;
clear:both; */
/* padding-right:10vw; */
/* vertical-align:middle; */
font-size: 0.60em;
color: rgb(54, 0, 18);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You could use flex and align items to the baseline.
.text_a{
display: flex;
align-items: baseline;
font-size:5em;
}
vertical-align doesn't work on block style elements. Here's additional information on that: https://christopheraue.net/design/vertical-align
Edit:
Taking another look at your code, these elements should have been aligned to the baseline with their default styles. You can still use flex, but just removing the float would work too.
.text_a {
font-size: 5em;
}
.text_b {
font-size: 0.60em;
color: rgb(54, 0, 18);
}
add css property line-height to text_b
.text_b {
line-height: 110px; /* adjust according to your need */
}
reference:
https://www.w3schools.com/cssref/pr_dim_line-height.asp
try this
text_a{
position:relative
}
text_b{
position: absolute;
bottom: 10px; //make it responsive i've just hard coded or else you can leave as it if it works
}
because h3 has some default styling so it becomes tedious to overwrite it
Remove the float from .text_b and give it a margin-left: 3vw:
class App extends React.Component {
render() {
return (
<div className="component">
<h3 className="text_a">
textA{" "}
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.component {
text-align: center;
padding: 50px;
}
.text_a {
font-size: 5em;
}
.text_b {
margin-left: 3vw;
font-size: 0.60em;
color: rgb(54, 0, 18);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
My solution: using a container with flex's displaying -thanks to sallf for the idea-, then align all the items on baseline, then use flex-basis to distribute the space between the items, hence allowing to maintain my textB on the right's edge of the screen.
Demo here: https://stackblitz.com/edit/react-ypdmxu
ReactJS's snippet:
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
class App extends Component {
render() {
return (
<div className="component">
<h3
className="text_container"
>
<span className="text_a">
textA {" "}
</span>
<span className="text_b">
textB
</span>
</h3>
</div>
);
}
}
render(<App />, document.getElementById('root'));
CSS' snippet:
.component{
padding:50px;
}
.text_container{
display: flex;
align-items: baseline;
font-size:5em;
}
.text_a{
flex-basis: 95%;
}
.text_b{
font-size:0.60em;
color:rgb(54, 0, 18);
}

Resources