【问题标题】: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;
    `;

【讨论】:

    猜你喜欢
    • 2021-06-27
    • 2021-12-13
    • 2019-09-05
    • 2019-01-13
    • 2021-07-16
    • 1970-01-01
    • 2020-03-25
    • 1970-01-01
    • 2013-01-01
    相关资源
    最近更新 更多