我在這里有一個 StackBlitz https://stackblitz.com/edit/react-ts-jefhjh?file=App.tsx,styled.ts
這是一個帶有 Typescript 的簡單反應應用程式
我有一個樣式組件，它使用 flex-box 將兩個列相鄰放置。
我將列的寬度傳遞到包裝容器中，例如<FlexContainer width={['60%', '40%']}>
然后使用組件中的值，例如
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex:
// align-content: stretch;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
第二列僅顯示一個。
我知道第一列正在獲取值，因為如果我使用align-content: stretch第一列顯示但布局錯誤。
我確定我使用 flex-box 的方式是錯誤的
我怎樣才能讓布局作業？
uj5u.com熱心網友回復：
有一個冒號而不是分號。使用display: flex;而不是display:flex:. 見https://stackblitz.com/edit/react-ts-quu5ce?file=App.tsx,styled.ts
import styled from 'styled-components';
interface IProps {
width?: string[];
}
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/523607.html
標籤：反应打字稿弹性盒