css - css对象模型中禁用属性的样式

Question

出于某种原因，我需要在反应组件中使用 CSS 对象模型传递 CSS 对象。在这里，我需要按钮在禁用和未禁用时的样式。就像我们做的：backgroundColor、borderRadius 等等。

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

这是我尝试使用它并希望以风格传递对象的地方。

Answer 1

不太优雅但可行的解决方案。

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>
        >
  );
}

Answer 2

const App = () => {

const [disable, setDisable] = useState(false);

return(
  <div>
    <button style={(style.active, disable && style.disable)}>Click</button>
  </div>
)
}