styled-components

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 #3186styled-components namespace