我正在使用 react rafce 函式,我想裝飾我的顏色圖示,我決定創建一個帶有顏色的圓形圖示,但最終沒有顯示任何顏色。
這是我的 css 樣式
const FilterColor = styled.div`
width:20px;
height:20px;
border-radius:50%;
background-color:$props{props=>props.color};
margin:0px 5px;
cursor:pointer;
`
這是我的 html 代碼
<FilterTitle>Color: </FilterTitle>
<FilterColor color= 'red' />
<FilterColor color ='darkblue'/>
<FilterColor color='orange' />
這是我的輸出
這是它應該看起來的樣子
uj5u.com熱心網友回復:
假設您正在使用樣式組件,請將 FilterColor 組件更改為:
const FilterColor = styled.div`
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${(props) => props.color}; // <-- this got changed
margin: 0px 5px;
cursor: pointer;
`;
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/398173.html
標籤:反应
