如何为DevExtreme React NumberBox设置红色边框

直接通过style属性给NumberBox设置borderColor不会生效，因为DevExtreme组件的DOM结构是封装过的——你设置的样式只会作用于组件的外层容器，而实际带有边框的输入框是内部的嵌套元素（通常是.dx-editor-input-wrapper）。

下面提供两种可行的解决方法：

方法一：通过类名动态控制样式（推荐） #

这种方法更符合React的样式管理规范，也更容易维护。

1. 给NumberBox动态添加条件类名：

import React, { useState } from 'react';
import { NumberBox } from 'devextreme-react';
import './MyNumberBox.css';

const MyNumberBox = () => {
  const [value, setValue] = useState(null);

  const handleValueChanged = (e) => {
    setValue(e.value);
  };

  const isOverLimit = value && value > 20;

  return (
    <NumberBox
      value={value}
      showSpinButtons={true}
      onValueChanged={handleValueChanged}
      elementAttr={{ className: isOverLimit ? 'red-border-numberbox' : '' }}
    />
  );
};

export default MyNumberBox;

2. 在对应的CSS文件（比如MyNumberBox.css）中添加样式：

/* 针对Outlined主题（默认主题） */
.red-border-numberbox .dx-editor-outlined .dx-editor-input-wrapper {
  border-color: red;
}

/* 如果你使用的是Filled主题，替换为这个选择器 */
/* .red-border-numberbox .dx-editor-filled .dx-editor-input-wrapper {
  border-color: red;
} */

/* 如果你使用的是Underlined主题，替换为这个选择器 */
/* .red-border-numberbox .dx-editor-underlined .dx-editor-input-wrapper {
  border-bottom-color: red;
} */

方法二：通过DOM操作动态设置样式 #

如果需要更直接的DOM控制，可以使用ref和事件来修改内部元素的样式：

import React, { useState, useRef } from 'react';
import { NumberBox } from 'devextreme-react';

const MyNumberBox = () => {
  const [value, setValue] = useState(null);
  const numberBoxRef = useRef(null);

  const updateBorderColor = (currentValue) => {
    if (!numberBoxRef.current) return;
    const inputWrapper = numberBoxRef.current.querySelector('.dx-editor-input-wrapper');
    if (inputWrapper) {
      inputWrapper.style.borderColor = currentValue && currentValue > 20 ? 'red' : '';
    }
  };

  const handleValueChanged = (e) => {
    setValue(e.value);
    updateBorderColor(e.value);
  };

  const handleContentReady = () => {
    updateBorderColor(value);
  };

  return (
    <NumberBox
      ref={numberBoxRef}
      value={value}
      showSpinButtons={true}
      onValueChanged={handleValueChanged}
      onContentReady={handleContentReady}
    />
  );
};

export default MyNumberBox;

注意事项 #

• 不同的DevExtreme主题（Outlined/Filled/Underlined）对应的DOM结构和类名略有差异，需要根据你使用的主题调整CSS选择器。
• 尽量避免使用!important，如果样式不生效，可以检查DevExtreme的默认样式优先级，调整选择器的特异性（比如增加父类选择器）。

内容的提问来源于stack exchange，提问作者SONIC