React项目使用styled-components编写的样式不生效是什么原因？

问题原因 #

你代码里的styled.div内嵌CSS规则中，left、top两个属性的末尾缺少CSS语法要求的分号，导致后续样式规则解析失败，最终样式不生效。

修正后代码 #

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
    position: absolute;
    left: ${(props) => (props.position === "left" ? "20px" : "380px")};
    top: 20px;
    background: ${(props) => (props.lampOn ? "orange" : "lightgrey")};
    width: 100px;
    height: 100px;
    border-radius: 50%;
`;

const Lamp = ({ lampOn, position }) => {
  return (
    <Wrapper lampOn={lampOn} position={position}>
      <div>Test light oo </div>
    </Wrapper>
  );
};
export default Lamp;

其他可选排查项 #

• 确认已正确安装styled-components依赖，可执行npm list styled-components检查安装状态
• 确认使用Lamp组件时正确传入了lampOn、position两个props，若props未按预期传入会导致动态样式不生效
• 确认Wrapper的父级元素设置了position: relative，否则absolute定位会相对于整个视口，可能出现和预期不符的位置效果

内容的提问来源于stack exchange，提问作者Sean Burnett