How to write conditional css with changable values

Question

I have a Card looks like this

    <Card.Header style={room.roomCapacity === room.students.length ? {backgroundColor: "#DC4C64"} : room.students.length === 0 ? {backgroundColor: '#14A44D'} : {backgroundColor: '#E4A11B'}} className={"text-center CardHeader"}>{room.roomNumber}</Card.Header>

But I want to write all styles in css. So how can i implement style={} function into css with these conditions?

Emiel Zuurbier · Accepted Answer · 2023-01-30 11:30:52Z

1

You could use a memoization function with useMemo to get the correct color based on your conditions.

import { useMemo } from 'react';

const ExampleComponent = ({ room }) => {
  const isRoomFull = room.roomCapacity === room.students.length;
  const isRoomEmpty = room.students.length === 0;

  const backgroundColor = useMemo(() => {
    if (isRoomFull) {
      return '#DC4C64';
    }

    if (isRoomEmpty) {
      return '#14A44D';
    }

    return '#E4A11B';
  }, [isRoomFull, isRoomEmpty]);

  return (
    <Card.Header 
      className="text-center CardHeader"
      style={{
        backgroundColor
      }} 
    >
      {room.roomNumber}
    </Card.Header>
  );
};

answered Jan 30, 2023 at 11:30

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to write conditional css with changable values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related