【问题标题】：styled-component Grid Areas as Props does't work样式组件网格区域作为道具不起作用
【发布时间】：2022-01-26 13:31:42
【问题描述】：

网格区域不能是道具。

==============================

export const Code = styled.input<{area?:String}>`
  font-family: Archivo;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  width: 61px;
  height: 19px;
  outline: none;
  border: unset;
  grid-area: ${({area})=>area ? area : ''};
  background-color: transparent;
`;

它也不能被覆盖：

 <Code type='text' placeholder='Code' style={{
                    gridArea:"nom code !important"
                }}

【问题讨论】：

嗨。 {area?:string} 是什么意思？
样式化组件的道具类型

标签： css styled-components

【解决方案1】：

它就在我面前hhhhh：

 export const Code = styled.input<{area?:string}>` // string type with LowerCase S
      font-family: Archivo;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      width: 61px;
      height: 19px;
      outline: none;
      border: unset;
      grid-area: ${({area})=>area ? area : 'code'};  // added intial value 
      background-color: transparent;
    `;

【讨论】：