美文网首页
styled-components

styled-components

作者: 别过经年 | 来源:发表于2022-04-06 22:00 被阅读0次

    1. styled(Input) 报错

    报错信息:
    Warning: React does not recognize the markRedxx prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase markredxx instead. If you accidentally passed it from a parent component, remove it from the DOM element.

    代码:

       <StyledInput
             placeholder="请输入"
             $markRed={markRedByKey('地点')}
             markRedxx
        />
    
    export const StyledInput = styled(Input)`
      background-color: ${(props) => (props.$markRed ? 'rgba(255, 0, 0,0.2)' : '')};
    `;
    

    怎么解决:
    在props最前面加上$就不会将该属性渲染到Input上

    How to extend styled component without passing props to underlying DOM element?

    2. 一个用styled-components的项目嵌套到另一个styled-components的项目,样式冲突

    styled-components生成的classname并不是随机的,两个项目有很多classname都是重复的。

    两个项目用的版本都是5.x 搜了下styled-components没有自带加前缀的方式,通过babel-plugin-styled-components namespace实现样式的区分

        "plugins": [
          [
            "babel-plugin-styled-components",
            {
              "namespace": "geek-sdk"
            }
          ]
        ]
    

    Prefix hash class #3186
    styled-components namespace

    相关文章

      网友评论

          本文标题:styled-components

          本文链接:https://www.haomeiwen.com/subject/tipdsrtx.html