react-beautiful-dnd项目中styled-components样式需包裹JS括号才生效原因求助

该问题和react-beautiful-dnd无关，是styled-components的标签模板字符串语法使用错误导致的：

• styled-components通过标签模板字符串语法解析样式，模板中未被${}插值包裹的内容会被当做纯CSS文本直接输出。你直接在模板中写border-color: "orange";、height: "100px";时，JS的字符串引号会被直接保留到最终生成的CSS规则中，浏览器无法识别带引号的颜色值、长度值，因此样式失效。
• 使用${"orange"}这种写法时，插值语法会将JS字符串的内容orange插入到样式中，最终生成的CSS是border-color: orange;，符合CSS语法规范，因此可以正常生效。

修正后的样式代码 #

固定的CSS属性值不需要加${}插值，也不要额外加JS层面的引号，修正后代码如下：

import styled from 'styled-components'

export const DroppableContainer = styled.div`
    display: flex;
    overflow: auto;
    border: 1px solid;
    border-color: orange;
    width: 50%;
    height: 100px;
`
export const DraggableItem = styled.div`
    font-size: 60px;
    flex: auto;
    text-align: center;
    background-color: ${({dragging}) => dragging ? "rgb(11, 138, 79)" : "rgb(156, 186, 172)"};
`

只有当你需要传入JS变量、通过表达式动态计算样式值的时候，才需要用到${}插值语法。

内容的提问来源于stack exchange，提问作者Matt Nann