A guide to declaring a SCSS attribute selector with a <length> type using a REACT property

Question

A guide to declaring a SCSS attribute selector with a <length> type using a REACT property

I am looking to develop a versatile component in React that can be customized externally:

AnotherPlace.tsx

...
<BarComponent width={200}>
...

BarComponent.tsx

interface IBarProps {
  //default width of 150px
  width?: 150;
  //default margin of 5px
  margin?: 5;
}

interface IBarState{
  checked: boolean;
}

class BarComponent extends Component<IBarProps, IBarState> {
    constructor(props: IBarProps) {
        super(props);
        ...
    }

...

    render(): ReactElement {
        return (
          <div className="bar-component"
              data-width={this.props.width + 'px'}
          >
          ...

BarComponent.scss

.bar-component {
    ...
    width: attr(data-width length);
    ...

However, I keep encountering an error when running the application (chrome):

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

... It is essential for me to have a "number" as a property due to calculations needed for inner components so that everything functions seamlessly together.

EDIT:

Using "style" has not been effective for me as it interferes with the ::before ::after features in my scss which rely on modifying "right:" based on the width.

For a clearer picture, this is the foundation of my project: https://www.sitepoint.com/react-toggle-switch-reusable-component/

css reactjs typescript react-native sass

Answer 1

Answer №1

In response to your query

Kindly provide a solution using attribute selector or inform me of its impossibility due to X reasons (include link to documentation if possible).

Regrettably, despite its potential usefulness, current research suggests that it is not currently feasible:

MDN on CSS attr():

Note: While the attr() function can be applied to any CSS property, support for properties other than content is considered experimental, and backing for the type-or-unit parameter is limited.

According to information from caniuse.com concerning css3-attr, the capability to utilize attr() with any CSS property (excluding content), and for non-string values (such as numbers, colors) via <type_or_unit> as per "CSS Values and Units Level 3", is currently not supported by browsers.

Please also refer to the statement in the ongoing draft for "CSS Values and Units Module Level 4":

The following features are considered at risk and may be eliminated during the CR period: toggle(), attr() [...]

(Source: https://drafts.csswg.org/css-values/#status)

A Chromium issue led me to an intriguing resource I wasn't previously aware of: web-platform-tests dashboard for css-values. Explore the (failing) tests prefixed with attr-, especially attr-length-valid.html and attr-px-valid.html.

However, there is optimism: the Chromium team recently (05/15/2020) proposed an Intent to Implement and Ship: CSS advanced attr() function

To incorporate the augmentation to attr() outlined in CSS Level 4, specifically permitting various types (besides ) and usage across all CSS properties (apart from pseudo-element 'content').

Note: CSS Level 4 has significantly revised attr() compared to Level 3 to simplify implementation. We will adhere to CSS4. [...]

Motivation: This feature has been extensively requested, with 77 stars at crbug.com/246571. [...]

Chromium tracking Issue 246571: Implement CSS3 attribute / attr references )

Firefox also demonstrates recent activity, see Firefox tracking Bug 435426 [meta] Implement CSS Values 3 extensions to attr(), where they make reference to Chromium's ongoing efforts at least.

(WebKit Bug 26609 - Support CSS3 attr() function shows no activity, which could pose a challenge)

Answer 2

In response to your query

Kindly provide a solution using attribute selector or inform me of its impossibility due to X reasons (include link to documentation if possible).

Regrettably, despite its potential usefulness, current research suggests that it is not currently feasible:

MDN on CSS attr():

Note: While the attr() function can be applied to any CSS property, support for properties other than content is considered experimental, and backing for the type-or-unit parameter is limited.

According to information from caniuse.com concerning css3-attr, the capability to utilize attr() with any CSS property (excluding content), and for non-string values (such as numbers, colors) via <type_or_unit> as per "CSS Values and Units Level 3", is currently not supported by browsers.

Please also refer to the statement in the ongoing draft for "CSS Values and Units Module Level 4":

The following features are considered at risk and may be eliminated during the CR period: toggle(), attr() [...]

(Source: https://drafts.csswg.org/css-values/#status)

A Chromium issue led me to an intriguing resource I wasn't previously aware of: web-platform-tests dashboard for css-values. Explore the (failing) tests prefixed with attr-, especially attr-length-valid.html and attr-px-valid.html.

However, there is optimism: the Chromium team recently (05/15/2020) proposed an Intent to Implement and Ship: CSS advanced attr() function

To incorporate the augmentation to attr() outlined in CSS Level 4, specifically permitting various types (besides ) and usage across all CSS properties (apart from pseudo-element 'content').

Note: CSS Level 4 has significantly revised attr() compared to Level 3 to simplify implementation. We will adhere to CSS4. [...]

Motivation: This feature has been extensively requested, with 77 stars at crbug.com/246571. [...]

Chromium tracking Issue 246571: Implement CSS3 attribute / attr references )

Firefox also demonstrates recent activity, see Firefox tracking Bug 435426 [meta] Implement CSS Values 3 extensions to attr(), where they make reference to Chromium's ongoing efforts at least.

(WebKit Bug 26609 - Support CSS3 attr() function shows no activity, which could pose a challenge)

Answer 3

Answer №2

Following the advice of G-Cyrillus, I have managed to discover a potential solution utilizing CSS custom properties. Unfortunately, my search for a resolution using attribute selectors did not yield any results, so I had to stick to one type of solution.

To add your custom properties in the SCSS file within the "parent" class, do the following:

.foo-component {
    --customwidth: 150px;
    --custommargin: 5px;

    width: var(--customwidth, 150px);
    ...
    &-inner {
        margin-left: var(--custommargin, 5px);
    }
    ...
}

Once you have declared the custom property, you can use it with

var(<propertyname>, <initialvalue>)

.

When working with React, you can make slight modifications to the render() function like this:

 render(): ReactElement {
    // Set the custom properties for width, margin, and slider position
    let cssProperties = {};
    cssProperties['--customwidth'] = this.props.width == null ? '150px' : this.props.width + 'px';
    cssProperties['--custommargin'] = this.props.margin == null ? '150px' : this.props.margin + 'px';
    cssProperties['--switchposition'] = (this.props.width == null ? 115 : this.props.width - 35) + 'px';

    return (
      <div className="foo-component" style={cssProperties}>
      ...
}

This approach will work effectively for each component individually.

Answer 4

Following the advice of G-Cyrillus, I have managed to discover a potential solution utilizing CSS custom properties. Unfortunately, my search for a resolution using attribute selectors did not yield any results, so I had to stick to one type of solution.

To add your custom properties in the SCSS file within the "parent" class, do the following:

.foo-component {
    --customwidth: 150px;
    --custommargin: 5px;

    width: var(--customwidth, 150px);
    ...
    &-inner {
        margin-left: var(--custommargin, 5px);
    }
    ...
}

Once you have declared the custom property, you can use it with

var(<propertyname>, <initialvalue>)

.

When working with React, you can make slight modifications to the render() function like this:

 render(): ReactElement {
    // Set the custom properties for width, margin, and slider position
    let cssProperties = {};
    cssProperties['--customwidth'] = this.props.width == null ? '150px' : this.props.width + 'px';
    cssProperties['--custommargin'] = this.props.margin == null ? '150px' : this.props.margin + 'px';
    cssProperties['--switchposition'] = (this.props.width == null ? 115 : this.props.width - 35) + 'px';

    return (
      <div className="foo-component" style={cssProperties}>
      ...
}

This approach will work effectively for each component individually.

Answer 5

Answer №3

One simpler method is to utilize inline styling:

       return (
          <div className="bar-component"
              style=`height:${this.props.height};`
          >

Answer 6

One simpler method is to utilize inline styling:

       return (
          <div className="bar-component"
              style=`height:${this.props.height};`
          >

Answer 7

Answer №4

When using the attr function in CSS, you must specify the attribute by selecting it within your SCSS styles.

.bar-element[data-height] {
    ...
    height: attr(data-height length);
    ...

If you have multiple attributes to style, you can target them like this:

.bar-element[data-height][data-padding] {
    ...
    height: attr(data-height length);
    padding: attr(data-padding number);
    ...

For more information, refer to the MDN documentation.

Answer 8

When using the attr function in CSS, you must specify the attribute by selecting it within your SCSS styles.

.bar-element[data-height] {
    ...
    height: attr(data-height length);
    ...

If you have multiple attributes to style, you can target them like this:

.bar-element[data-height][data-padding] {
    ...
    height: attr(data-height length);
    padding: attr(data-padding number);
    ...

For more information, refer to the MDN documentation.

A guide to declaring a SCSS attribute selector with a <length> type using a REACT property

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to obtain the index of a button

A step-by-step guide on leveraging the useRef hook to switch between different images

Traversing an object with a single identifier

Enhancing Pixi.js functionality with TypeScript: Utilizing 'none' Module Settings

Verify Angular Reactive Form by clicking the button

I am interested in incorporating various forms within this code

Troubleshooting non-responsive Bootstrap navigation bars in HTML/CSS

What is the correct way to write SVG markup within SVG tags in a React and NextJS environment?

Eliminate the gap between spans when wrapping words

Having trouble adding animation to button element following the application of :after pseudo-element styling

How to center a container in HTML using Bootstrap techniques

Adjust the dimensions of the initial cell

Converting an Array of Objects into a single Object in React: A Tutorial

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Trouble connecting socket.io to backend due to a 404 error

Combining numerous inputs into an array in a React component

Displaying jQuery Slide Elements in a row instead of stacking them on top of each other

Refresh the webpage in IE8 by utilizing compatibility view to ensure optimal performance

Yelp API call resulting in an 'undefined' response

Acquire the stripe color scheme of Bootstrap tables