Styled-components css 属性仅在被 javascript 包围时生效答案

【问题标题】：Styled-components css properties are only enacted when surrounded by javascriptStyled-components css 属性仅在被 javascript 包围时生效
【发布时间】：2021-09-30 15:52:12
【问题描述】：

问题是样式组件中的 css 仅在 react-beautiful-dnd 项目中如果 CSS 属性值被括在 javascript 括号 ${"50%"}、${"100px"}、$ 中{“橙色”}。

我的问题是为什么会这样？

“App.styles.js”样式化组件文件。 注意！ height 和border-color 属性没有被javascript 括号括起来。

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

"App.js" React App 组件的返回语句，它使用了

return (
    <div>
        <DragDropContext onDragEnd={result => onDragEnd(result)}>
            <Droppable droppableId="droppable" direction="horizontal">
                {(provided, snapshot) => (
                    <DroppableContainer
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                    >
                        {items.map((item, index) => (
                            <Draggable key={item.id} draggableId={item.id} index={index}>
                                {(provided, snapshot) => (
                                    <DraggableItem
                                        dragging={snapshot.isDragging}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        style={{ ...provided.draggableProps.style,}}
                                    >
                                        {item.content}
                                    </DraggableItem>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </DroppableContainer>
                )}
            </Droppable>
        </DragDropContext>
    </div>
);

如您所见，组件的高度不是 100px，边框颜色不是橙色

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

styled-components 中的所有属性都不能有字符串引号。

import styled from 'styled-components'

export const DroppableContainer = styled.div`
     display: flex;
     overflow: auto;
     background-color: rgb(156, 186, 172);
     width: 500px;
     border: 5px solid;
     border-color: green;
 `
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)"};
 `

【讨论】：