setValueForStyle() — react Function Reference

Architecture documentation for the setValueForStyle() function in CSSPropertyOperations.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ setValueForStyle() — react Function Reference

Dependency Diagram

graph TD
  a5cb946f_4be7_ba78_7ea5_74c8351709a8["setValueForStyle()"]
  e3e314a2_4cee_1a10_2d68_791d5d66f89e["CSSPropertyOperations.js"]
  a5cb946f_4be7_ba78_7ea5_74c8351709a8 -->|defined in| e3e314a2_4cee_1a10_2d68_791d5d66f89e
  236c422d_d866_d548_e097_3cec99530791["setValueForStyles()"]
  236c422d_d866_d548_e097_3cec99530791 -->|calls| a5cb946f_4be7_ba78_7ea5_74c8351709a8
  a301cb19_309d_31b8_cdc3_598aa3af82be["warnValidStyle()"]
  a5cb946f_4be7_ba78_7ea5_74c8351709a8 -->|calls| a301cb19_309d_31b8_cdc3_598aa3af82be
  style a5cb946f_4be7_ba78_7ea5_74c8351709a8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/CSSPropertyOperations.js lines 68–102

function setValueForStyle(style, styleName, value) {
  const isCustomProperty = styleName.indexOf('--') === 0;
  if (__DEV__) {
    if (!isCustomProperty) {
      warnValidStyle(styleName, value);
    }
  }

  if (value == null || typeof value === 'boolean' || value === '') {
    if (isCustomProperty) {
      style.setProperty(styleName, '');
    } else if (styleName === 'float') {
      style.cssFloat = '';
    } else {
      style[styleName] = '';
    }
  } else if (isCustomProperty) {
    style.setProperty(styleName, value);
  } else if (
    typeof value === 'number' &&
    value !== 0 &&
    !isUnitlessNumber(styleName)
  ) {
    style[styleName] = value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
  } else {
    if (styleName === 'float') {
      style.cssFloat = value;
    } else {
      if (__DEV__) {
        checkCSSPropertyStringCoercion(value, styleName);
      }
      style[styleName] = ('' + value).trim();
    }
  }
}