当前位置：首页 > React

react项目如何用js改样式

2026-01-25 18:06:41React

使用内联样式

在React中，可以直接通过JavaScript对象定义样式，并将其传递给元素的style属性。样式属性需要使用驼峰命名法（如backgroundColor而非background-color）。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
  padding: '10px'
};

function App() {
  return <div style={divStyle}>Hello World</div>;
}

动态修改样式

可以根据组件状态或props动态改变样式。通过条件判断或状态值动态生成样式对象。

react项目如何用js改样式

function App() {
  const [isActive, setIsActive] = useState(false);

  const buttonStyle = {
    padding: '10px 20px',
    backgroundColor: isActive ? 'green' : 'gray',
    color: 'white'
  };

  return (
    <button 
      style={buttonStyle}
      onClick={() => setIsActive(!isActive)}
    >
      Toggle
    </button>
  );
}

使用CSS类名切换

虽然不直接使用JavaScript修改样式，但可以通过JavaScript动态切换CSS类名来实现样式变化。

// App.css
.active {
  background-color: green;
  color: white;
}

.inactive {
  background-color: gray;
  color: black;
}

// App.jsx
function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button 
      className={isActive ? 'active' : 'inactive'}
      onClick={() => setIsActive(!isActive)}
    >
      Toggle Class
    </button>
  );
}

直接操作DOM元素

在极少数需要直接操作DOM的情况下，可以使用ref获取DOM节点并修改其样式。

react项目如何用js改样式

function App() {
  const divRef = useRef(null);

  const changeColor = () => {
    divRef.current.style.backgroundColor = 'red';
  };

  return (
    <div>
      <div ref={divRef} style={{ height: '100px', width: '100px', border: '1px solid black' }} />
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

使用样式库

对于复杂的样式管理，可以考虑使用第三方库如styled-components或emotion，它们允许用JavaScript编写CSS样式。

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

function App() {
  return (
    <div>
      <StyledButton>Normal</StyledButton>
      <StyledButton primary>Primary</StyledButton>
    </div>
  );
}