React项目中styled-components样式不生效，是否需要额外配置？

解决方案 #

你使用的是create-react-app脚手架搭建的项目，安装styled-components后不需要做额外配置即可直接使用。

当前样式不生效的核心原因是styled模板字符串内的CSS属性值添加了多余的单引号，属于CSS语法错误，导致规则不被浏览器识别。
styled的模板字符串内部遵循原生CSS写法，普通属性值不需要包裹引号，修正后的代码如下：

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

const Container = styled.div`
  height: 60px;
  background-color: black;
`;

const Navbar = () => {
  return <Container>nav</Container>;
};

export default Navbar;

如果修改后仍有问题，可按以下点排查：

• 确认styled-components引入路径拼写正确，没有拼写错误
• 打开浏览器开发者工具，查看Container元素对应的样式规则是否被其他全局样式覆盖
• 清除本地缓存后重启开发服务测试

内容的提问来源于stack exchange，提问作者arif hossain