css Question posted in
Some basic documentation can be found here.

Css – How to add color to the numberbox

Hi all this is a simple devextreme code blocks.I want to create the numberbox border colour as red.can you help me how to perform that.

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

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

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

  const borderColor = value && value > 20 ? 'red' : ''; // Conditional border color

  return (
    <NumberBox
      value={value}
      showSpinButtons={true}
      onValueChanged={handleValueChanged}
      style={{ borderColor: borderColor }} // Apply inline style for border color
    />
  );
};

export default MyNumberBox;

I try to add style tag but it was not appearing.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    import React, { useState } from 'react';
import { NumberBox } from 'devextreme-react';
import './sample.css';

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

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

  return (
    <NumberBox
      value={value}
      showSpinButtons={true}
      onValueChanged={handleValueChanged}
      className={value>20 && 'red-color'}
    />
  );
};

export default MyNumberBox;

    Simply add a class to NumberBox with a condition when value > 20.

    sample.css

    .red-color{
  border-color: red;
}

    You can achieve this with out any extra node to the DOM tree


  2. 0

    Since the devextreme-react NumberBox corresponds to an input tag, one way would be to enclose the NumberBox in a div with a conditional className and then apply styling to the input in the css file.

      const errorClassName = value && value > 20 ? 'red-input-border' : ''; // Conditional border color

  return (
    <div className={errorClassName}>
       <NumberBox
      value={value}
      showSpinButtons={true}
      onValueChanged={handleValueChanged}
    />
    </div>
   
  );

    CSS:

    .red-input-border input{
  border-color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search