Tips for preventing the use of inline styling in React

Question

Tips for preventing the use of inline styling in React

I am facing an issue with some variables set at the top of my functional component that are not being used except in styles:

const testWidth = 100;
const testHeight = 100;

Although I use some of these variables in my styles...

I am considering moving my styles to another file, related to a class name like '.divWrapperStyle', but I'm unsure about how to interact with the variable 'testWidth'

<div
style={{
  borderBottom: 0,
  width: `${testWidth}px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}}
>

I am thinking of creating a separate .css file like this:

.wrapper{
    borderBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    paddingTop: 20,
 }

After importing that file, I might use something like:

 <div className="wrapper>

But how can I include the value of testWidth for the width property?

The variables used in CSS are causing some difficulties for me :/

Any suggestions on how to address this issue would be greatly appreciated!

javascript html css reactjs inline-styles

Answer 1

Answer №1

If you're in search of a solution, the styled-components library is worth considering.

When it comes to using traditional CSS, it's important to shift your perspective. Focus on defining the style variations you want to support rather than passing arbitrary numerical values to your CSS.

You can create variations like wrapper--mobile, wrapper--tablet, wrapper--desktop, or even just a single modification such as wrapper--wide following the BEM notation.

In the second approach, utilize media queries for dimension calculations (mobile vs. tablet) and JavaScript truthy-calculations using a tool like clsx to generate class names that represent the variants you want to support in your CSS.

If compatible with your browser stack, consider using CSS variables. Remember to focus on declaring the set of variations you need to support in one place for easy adjustments in the future, rather than focusing on passing arbitrary numerical values.

I hope these options bring you closer to achieving your desired outcome. Let me know if you need further assistance.

Answer 2

If you're in search of a solution, the styled-components library is worth considering.

When it comes to using traditional CSS, it's important to shift your perspective. Focus on defining the style variations you want to support rather than passing arbitrary numerical values to your CSS.

You can create variations like wrapper--mobile, wrapper--tablet, wrapper--desktop, or even just a single modification such as wrapper--wide following the BEM notation.

In the second approach, utilize media queries for dimension calculations (mobile vs. tablet) and JavaScript truthy-calculations using a tool like clsx to generate class names that represent the variants you want to support in your CSS.

If compatible with your browser stack, consider using CSS variables. Remember to focus on declaring the set of variations you need to support in one place for easy adjustments in the future, rather than focusing on passing arbitrary numerical values.

I hope these options bring you closer to achieving your desired outcome. Let me know if you need further assistance.

Answer 3

Answer №2

Instead of adding inline styles repeatedly, consider creating a separate .JS file named style.js for better organization. Here's an example of how you can structure it:

const testWidth = 100;
const testHeight = 100;

export default const styles = {
   divWrapperStyle: {
     borderBottom: 0,
     width: testWidth, // utilize variables
     width: 'auto',
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 20,
   }
}

To use these styles in your functional component, simply import them like this:

import styles from '{pathToStyle.jsFile}';

Then, apply the styles to your elements like so:

<div style={styles.divWrapperStyle}>

By following this approach, you can easily adjust styles dynamically without relying on external libraries. It's a simple and efficient solution.

Answer 4

Instead of adding inline styles repeatedly, consider creating a separate .JS file named style.js for better organization. Here's an example of how you can structure it:

const testWidth = 100;
const testHeight = 100;

export default const styles = {
   divWrapperStyle: {
     borderBottom: 0,
     width: testWidth, // utilize variables
     width: 'auto',
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 20,
   }
}

To use these styles in your functional component, simply import them like this:

import styles from '{pathToStyle.jsFile}';

Then, apply the styles to your elements like so:

<div style={styles.divWrapperStyle}>

By following this approach, you can easily adjust styles dynamically without relying on external libraries. It's a simple and efficient solution.

Answer 5

Answer №3

Instead of adding another library, you can simply move the styles to a separate file and import them as constants, with default values specified for any values that may need to be changed.

Then, if you need to update or change a property, you can easily do so by spreading in the new value:

// styles.js
export const myStyles = {
  borderBottom: 0,
  width: `10px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}

Here's how you can use it:

// MyComponent.js
import {myStyles} from ... 

<div style={{...myStyles, width: `${newWidth}px`}}>

Answer 6

Instead of adding another library, you can simply move the styles to a separate file and import them as constants, with default values specified for any values that may need to be changed.

Then, if you need to update or change a property, you can easily do so by spreading in the new value:

// styles.js
export const myStyles = {
  borderBottom: 0,
  width: `10px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}

Here's how you can use it:

// MyComponent.js
import {myStyles} from ... 

<div style={{...myStyles, width: `${newWidth}px`}}>

Tips for preventing the use of inline styling in React

Answer №1

Answer №2

Answer №3

Similar questions

Content creator: Enhancing HTML search functionality using parameters

What is the term used for a tag that automatically closes itself?

Creating a Star Rating System Using HTML and CSS

Styled-Component: Incorporating Variables into Styled-Component is my goal

Tips for establishing a custom thumbnail and title for HTML audio or video in the Chrome media control menu and Windows media control dialog

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

Processing .obj file and converting it into a string format with the help of three

Setting the root position of a div: How can it be done?

Error message from Commitlint: Uncaught ReferenceError: module is not defined within an ES module environment

Obtaining the sum of two variables from two separate functions results in a value of NaN

Is it possible to add data in MongoDB without specifying a field name?

Inserting a custom text box underneath the Anything Slider

The harmonious combination of Opera and XMLHttpRequest creates a

Dynamic Bodymovin motion graphics

Navigate back to the previous route within the Vue router hierarchy

It appears as though the promise will never come to fruition

When using React, draggable components with input fields may lose their ability to receive focus when clicking on the input field

My confidential environment variables are being inadvertently revealed to the client by Next.js

What is the best way to extract data from a JavaScript object received from multer?