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

Question

The problem is the css in the style-components is only enacted in the react-beautiful-dnd project if the CSS properties values are surrounded in javascript brackets ${"50%"}, ${"100px"}, ${"orange"}.

My question is why is this occurring?

"App.styles.js" the styled-components file. Note! the height and border-color property are not surrounded by javascript brackets.

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" The return statement for the React App component, which uses the

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>
);

As you can see the height of the component is not 100px and the border-color is not orange

Answer 1

All properties in the styled-components must not have string quotations around them.

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