The styled components can create identical CSS classes with varying conditions

Below are the CSS styles I am currently using:

import styled, { css } from "styled-components";

const H4 = css`
  font-family: "Futura";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  color: #3a786a;
`;
const H3 = css`
  font-size: 24px;
`;

const Span = css`
  font-size: 16px;
`;

export const Typography = styled.div`
  #widgetStyles & {
    ${(props) => {
      switch (props.variant) {
        case "h4":
          return H4;
        case "h3":
          return H3;
        case "body1":
          return Span;
        default:
          return css`
            font-size: 14px;
            color: #010101;
          `;
      }
    }}
  }
`;

When I use the Typography component with different variants, the Styled-components library generates the same CSS class for each variant. This results in conflicts between the styles.

Here is an example of how I am using the Typography component with different variations:

<Typography variant="h4">{label}</Typography>

<Typography variant="h3">{label}</Typography>

However, despite specifying different variants, the output still displays the same CSS class being applied:

https://i.sstatic.net/lj6zy.png

cssreactjsjsxstyled-components

Answer №1

In essence, styled-components generates unique classes where the first class is the same and the subsequent ones are different. This can be observed in the h4 and h3 tags. Would you mind updating #widgetStyles & to #widgetStyles && as shown in the code snippet below?

import styled, { css } from "styled-components";

const H4 = css`
  font-family: "Futura";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  color: #3a786a;
`;
const H3 = css`
  font-size: 24px;
`;

const Span = css`
  font-size: 16px;
`;

export const Typography = styled.div`
  #widgetStyles && {
    ${(props) => {
      switch (props.variant) {
        case "h4":
          return H4;
        case "h3":
          return H3;
        case "body1":
          return Span;
        default:
          return css`
            font-size: 14px;
            color: #010101;
          `;
      }
    }}
  }
`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items. On the right side, there is another column showcasing multiple cards inside a .row. Th ...

cssbootstrap-4

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

htmlcss

Experiencing a blank page on localhost:3000 when utilizing npm in conjunction with ReactJS

click here for the image description var express = require ('express'); //create our app var app = express(); app.use(express.static('public')); app.listen(3000,function(){ console.log('Serve ...

node.jsreactjslocalhost

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

csshandlebars.js

What steps can I take to prevent encountering the error message 'Function components are not able to be given refs' while utilizing react-router-dom?

Here is the code snippet using Material UI components... import React from "react"; import { NavLink } from "react-router-dom"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; function LinkTab(link){ return <Tab ...

reactjsreact-routermaterial-ui

How can I keep a fixed position element from shifting to the left when resizing the window?

Is there a solution to prevent the logo element from shifting to the left when resizing the window, despite its fixed position? #logo { top:20px; left:50%; margin-left:-177.6px; width:355.2px; height:148.8px; ...

htmlcss

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Can someone help me with checking if a specific value is in my array? I want to achieve something like that, any suggestions on how to do it? if(jQuery.inArray($('#ValueInputTitle').val, variableValueInput) !== -1) { console.log("is in arr ...

javascriptjqueryhtmlcssjive

Steps to update the active state in the "reducer" when clicking on elements outside of the "reducer" area

Working with react-redux has presented some challenges for me. I've created multiple reducers such as action, root reducer, active_step reducer, and list_step reducer. One aspect that I find intriguing is the ability to dynamically map and change the ...

javascriptreactjsecmascript-6redux

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Implementing real-time updates in React-Big-Calendar by dynamically adding events from Firebase without the need for manual refreshing

I'm currently facing a challenge with React-Big-Calendar as I strive to achieve real-time population of newly added events. The code snippet below helps me achieve this goal, as events are promptly displayed on the calendar upon creation/modification/ ...

reactjsfirebasegoogle-cloud-firestorereact-big-calendar

Ways to verify if a string is a number without using isNaN and with specified criteria

I am trying to determine if a string represents a valid number without relying on the isNaN function. The reason for this is that I need to be able to accept the ',' character, which isNaN ignores. Additionally, I do not want to allow negative nu ...

javascriptreactjsstring

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: https://i.sstatic.net/UcD2F.png Current code snippet: form with modal <%= form_for @note, :url => registrant ...

htmlcssruby-on-rails

First video filling the entire screen with no black bars

I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it. When the window is resized, I would like the vid ...

htmlcssvideo

How do I tailor the appearance of the Joyride to display in specific locations?

I need help changing the position of the popup for Joyride on my website. Currently, the text is appearing above a column, but I want it to be centered and appear on the left side instead. Is there a way to achieve this? Here is my code: return (<Joyri ...

reactjsweb

How to Prompt CSS Rule Evaluation to Ensure Proper Functionality (Solution)

When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...

css

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...

htmlcssfooterwrapper

Adjusting the height of a textarea within a table

My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...

javascriptjqueryhtmlcss

Do I have to implement a column grid for creating responsive websites?

I'm feeling a bit uncertain about the necessity of a column grid for creating a responsive website. For instance, I plan to kick off with the Bones WordPress theme. My intention is to utilize the SCSS setup provided in this theme. The grid it offers i ...

cssresponsive-design

displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first. What I would like to achieve is to have "input1 , input2" on the same line. Here is my code: ...

javascriptcsshtmlangular