Стиль для отключенного свойства в объектной модели css

По какой-то причине мне нужно передать объекты CSS, используя объектную модель CSS внутри компонента реакции. Здесь мне нужны стили для кнопок, когда они отключены и когда они не отключены. Как мы делаем с: backgroundColor, borderRadius и так далее.

 const controlButton = {
        backgroundColor:"#006191",
        padding:"10px 20px",
        border:"none",
        borderRadius:"5px"
    }

Вот где я пытаюсь использовать его и хочу передать объект в стиле.


reactjs css cssom
person Barsha Upadhyaya    schedule 09.02.2021    source источник
comment
Вам нужно будет использовать хук/состояние, чтобы иметь отключенное состояние. например const [disable, setDisable]= useState(true) ‹button classname= {disable? disabledButton : контрольная кнопка}   -  person theabrar    schedule 09.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Не слишком элегантное, но рабочее решение.

import React, { useState } from 'react';

const controlButtonEnabled = {
  backgroundColor: '#006191',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
};
const controlButtonDisabled = {
  backgroundColor: 'gray',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px',
};

export default function MyAwesomeComponent() {
  
  const [enabled, setEnabled] = useState(true);
  const onEnable = () => {
    setEnabled(!enabled);
  };

  return (
    
          <button
            onClick={onEnable}
            style={enabled ? controlButtonEnabled : controlButtonDisabled}
          >
            Button
          </button>
        >
  );
}

person Vladimir Vs    schedule 09.02.2021