如何在React应用中的CSS的许多属性中使用JS变量。

Question

我创建了一个提示气泡的组件。HintBubble 组件。

import React from 'react';

const HintBubble = ({ text, pointerDirection = "top", color = "#f7b049" }) => {
    return (
        <section id="hint-bubble" className={`hint-bubble-${pointerDirection}`}>
            {text}
        </section>
    );
};

export default HintBubble;

而这些都是Stylus为这个组件编写的不同风格。

// Top side
.hint-bubble-top {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-bottom-color: #800040;
    border-top: 0;
    border-left: 0;
    margin-left: -21px;
    margin-top: -42px;
}

// Right Side
.hint-bubble-right {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-left-color: #800040;
    border-right: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-right: -42px;
}

// Bottom side
.hint-bubble-bottom {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-top-color: #800040;
    border-bottom: 0;
    border-left: 0;
    margin-left: -21px;
    margin-bottom: -42px;
}

// Left Side
.hint-bubble-left {
    position: relative;
    background: #800040;
    border-radius: .4em;
}

.hint-bubble-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-right-color: #800040;
    border-left: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-left: -42px;
}

用于创建所有状态，这些状态显示在 这个，我必须设置 background-color, border-bottom-color, border-left-color...不同类的属性。

我知道我可以改变 background-color 房产 document.queryselector('.hint-bubble-top').style.backgroundColor但我想给 color 从 props 并将其全部取代 background-color, border-bottom-color, border-left-color, ... 我的Stylus文件中的属性。

Answer 1

你可以将color设置为css变量，然后在你的组件中更新它。

  import React, {createRef, useEffect} from 'react';

  const HintBubble = ({text, pointerDirection = 'top', color = '#f7b049'}) => {
    const hint = createRef();

    useEffect(() => hint.current.style.setProperty('--hint-color', color), [
      color,
    ]);

    return (
      <section
        ref={hint}
        id="hint-bubble"
        className={`hint-bubble hint-bubble-${pointerDirection}`}
      >
        {text}
      </section>
    );
  };

  export default HintBubble;

然后CSS就会变成这样

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  .hint-bubble {
    --hint-color: #800040;
  }
  // Top side
  .hint-bubble-top {
    position: relative;
    background: var(--hint-color);
    border-radius: 0.4em;
  }

  .hint-bubble-top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-bottom-color: var(--hint-color);
    border-top: 0;
    border-left: 0;
    margin-left: -21px;
    margin-top: -42px;
  }

  // Right Side
  .hint-bubble-right {
    position: relative;
    background: var(--hint-color);
    border-radius: 0.4em;
  }

  .hint-bubble-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-left-color: var(--hint-color);
    border-right: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-right: -42px;
  }

  // Bottom side
  .hint-bubble-bottom {
    position: relative;
    background: var(--hint-color);
    border-radius: 0.4em;
  }

  .hint-bubble-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-top-color: var(--hint-color);
    border-bottom: 0;
    border-left: 0;
    margin-left: -21px;
    margin-bottom: -42px;
  }

  // Left Side
  .hint-bubble-left {
    position: relative;
    background: var(--hint-color);
    border-radius: 0.4em;
  }

  .hint-bubble-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 42px solid transparent;
    border-right-color: var(--hint-color);
    border-left: 0;
    border-bottom: 0;
    margin-top: -21px;
    margin-left: -42px;
  }