Is there a way to apply a consistent style to all the fields of an object at once?

I have a formatting object named typography that includes various styles. One common issue I've encountered is that the line-height property is consistently set to 135%. Anticipating that this might change in the future, I am looking for a way to centralize this value rather than repeating it multiple times within the object. Below is a snippet of my current typography object:

const typography = {
  globalStyles: `
      font-family: Lato;
      font-style: normal;
      color: #000000;`,
  header: {
    XXL: `
        font-weight: normal;
        font-size: 37px;
        line-height: 135%;`,
    XL: `
        font-weight: normal;
        font-size: 33px;
        line-height: 135%;`,
    L: `
        font-weight: normal;
        font-size: 29px;
        line-height: 135%;`,
    M: `
        font-weight: normal;
        font-size: 25px;
        line-height: 135%;`,
    S: `
        font-weight: normal;
        font-size: 21px;
        line-height: 135%;`,
    bold: {
        ...
    },
  },
  body: {
      ...
  }
}

In an attempt to address this issue, I experimented with creating a lineHeight property lineHeight:line-height: 135%; and using the spread operator ...this.lineHeight to apply it. However, this approach did not yield the desired outcome. Please see the revised code snippet below:

const typography = {
  lineHeight: `line-height: 135%;`,
  globalStyles: `
      font-family: Lato;
      font-style: normal;
      color: #000000;`,
  header: {
    XXL: `
        font-weight: normal;
        font-size: 37px;
        ...this.lineHeight`,
    XL: `
        font-weight: normal;
        font-size: 33px;
        ...this.lineHeight`,
    L: `
        font-weight: normal;
        font-size: 29px;
        ...this.lineHeight `,
    M: `
        font-weight: normal;
        font-size: 25px;
        ...this.lineHeight`,
    S: `
        font-weight: normal;
        font-size: 21px;
        ...this.lineHeight`,
    bold: {
        ...
    },
  },
  body: {
      ...
  }
}

Any assistance on this matter would be greatly appreciated!

csstypescriptstyles

Answer №1

Your text formatting includes solely strings while already utilizing template strings. Therefore, you can take advantage of that and separate the line-height value into its own variable like so:

const lineHeight = '135%'; // Extracted lineHeight

const typography = {
  globalStyles: `
      font-family: Lato;
      font-style: normal;
      color: #000000;`,
  header: {
    XXL: `
        font-weight: normal;
        font-size: 37px;
        line-height: ${lineHeight};`, // Incorporate the extracted lineHeight inside your string template
    XL: `
        font-weight: normal;
        font-size: 33px;
        line-height: ${lineHeight};`,
    L: `
        font-weight: normal;
        font-size: 29px;
        line-height: ${lineHeight};`,
    M: `
        font-weight: normal;
        font-size: 25px;
        line-height: ${lineHeight};`,
    S: `
        font-weight: normal;
        font-size: 21px;
        line-height: ${lineHeight};`,
    bold: {
        ...
    },
  },
  body: {
      ...
  }
}

Answer №2

If you're looking to adjust font size using a relative unit, the property em is what you need. Using em, you can take the font size of the parent element and scale it up - for example, doubling it with 2em. To apply this concept in your code, you would write:

font-weight: normal;
font-size: 37px;
line-height: 1.35em;

In this scenario, the calculation would be 37 * 1.35.

I trust this explanation aligns with your query.

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

Unsuccessful invocation of React's componentDidMount method

Our UI designer created a Tabs component in React that allows for selecting and rendering child components based on index. However, I am facing an issue where the componentDidMount function is not being called when switching between tabs. I have implement ...

reactjstypescript

The onChange function in CustomSelect is triggering an endless loop of renders in a React application using TypeScript and Material-

Currently, I am working with a mui element called CustomSelect. It functions perfectly on desktop, however, the handleChange function from onChange only console logs once. On mobile (even in development mode), it renders 51 times before crashing and displa ...

reactjstypescriptmaterial-ui

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

javascripthtmlcsswordpressloading

I attempted to copy the "koa" module from my node_modules folder to a custom typeRoots directory, but it doesn

I want to use Ant Design UI, and I hope to import the script tag with the .min.js label, like this: <script src="//cdn.staticfile.org/react/15.4.1/react.min.js"></script> <script src="//cdn.staticfile.org/react/15.4.1/react-with-addons.min. ...

reactjstypescriptwebpackkoaantd

Angular2: Learn how to dynamically create input fields when a button is clicked

My current challenge involves replicating input fields on click of a button. I have a set of input fields where data can be entered, and then I need to add another set of the same fields for additional data. There needs to be a way to remove these replicat ...

javascriptjqueryangulartypescript

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

javascriptcssreactjswebpacksass

Exploring the art of beautifying React.js with SCSS

I have been working on creating the homepage layout for a project using SCSS to style Reactjs with the assistance of an online course. However, I am facing an issue where my layout looks different from the one presented in the course even though I have app ...

cssreactjs

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

cssreactjsrowoverflow

Unable to loop through the Array

let Users = [ { name: 'John', id: '1', jp: 'USA' }, { name: 'Jane', id: '2', jp: 'Japan' }, ]; export function DisplayUsers(usersList) { return ( <div> {usersList?.map((user ...

reactjstypescript

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

javascriptjqueryhtmlcssangularjs

Reading text files line by line in TypeScript using Angular framework is a valuable skill to have

Struggling with reading text files line by line? While console.log(file) may work, it doesn't allow for processing each individual line. Here's my approach: In api.service.ts, I've implemented a function to fetch the file from the server: ...

angulartypescriptfile

Can you explain the distinction between `any[]` and `{ [s: string]: any }`?

I was attempting to make this code snippet function properly: test(a: any[]) { let b: string[][] = []; b.push(Object.keys(a[0])); b.push(...a.map(e => Object.values(e))); } However, the compiler is throwing an error for the b.push(...a.ma ...

typescript

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

javascriptreactjstypescriptjsxglamorous

Obtain the complete path in Vue router by utilizing nested routes

After creating nested routes for Vue Router, I encountered a problem while using the routes to generate a navigation menu. Currently, I am using route.path in 'router-link :to=' which only gives me a part of the path. I want to include the absolu ...

javascripttypescriptvue.jsvue-router

Exploring the use of a customizable decorator in Typescript for improved typing

Currently, I am in the process of creating TypeScript typings for a JavaScript library. One specific requirement is to define an optional callable decorator: @model class User {} @model() class User {} @model('User') class User {} I attempted ...

javascripttypescriptdecoratortypescript-typings

I am unable to make any changes to the .navbar and #navbar elements using CSS

I'm having trouble customizing the navigation bar using .navbar and #navbar in CSS. I was hoping to make changes to the Bootstrap navbar, but nothing seems to be working. I'm not sure if it's an issue with the HTML or CSS. I've include ...

htmlcssbootstrap-5

Adjust the contents of a div to automatically fit within a hidden overflow div

Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is: .jumbotron { overfl ...

jqueryhtmlcssbootstrap-4

Activate the toggle feature on the navigation bar using Bootstrap

Below is the code I am using: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bda3bf">[email protected]</a>/dist/css/bootstrap.min.css" rel ...

htmlcssbootstrap-5

Sharing parameters between pages in Angular IonicPassing parameters between pages within an Angular Ionic application

Is there a way to pass parameters from the signup page to the signupotp page successfully? I am facing an issue where the OTP on the signupotp page is not being recognized because the parameters (email and mobile) are not getting passed properly. In my bac ...

angulartypescriptionic-frameworkionic4