五分钟 Styled-components 高等实用技巧

2023年9月13日 157次阅读 来源: 二哲

写在前面的空话

回到2013年，React平空降生。然则在当时，我们会想，oh shit! 我们十分困难分离了HTML/CSS/JS, 为何涌现了JSX，我们又须要把HTML和JS耦合在一同？React 制造了 HTML in JS. 在React中，我们晓得，统统即组件。那既然HTML能在js里写，为何我们不把CSS也一同写呢？如许不才是一个真正的组件吗？

Styled-components就是为React而生的，它是CSS in JS的下一代解决方案。以往我们想要做到css scope都须要在webpack中种种设置，或许运用js的解决方案。而styled-components你只须要import styled from 'styled-components';即可。

以至React圆满的连系，不仅是从TagName上，另有Props上。使我们的代码有更好的语义化，可维护性更强，效力更高。固然我们无需斟酌它的进修本钱，只需你用过CSS或许SASS都能够马上上手，由于它本身就是一种超集的存在。

接下来，我会逐渐的引见一些这段时刻以来，我异常喜好的独占的特征。

开胃菜

const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;
console.log(Button); //styled component
console.log(new Button()); // react component 

export default CustomButton extends React.component {
    render() {
        return <Button {...props} />
    }
}

styled-components 用了
tagged template语法，直接为我们编写款式建立组件。

继续

styled-components继续款式有两种写法以下

const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;

const OtherButton1 = styled(button)``;
const OtherButton2 = button.extend``; // 老的写法，不引荐，将来会被烧毁

写法一的继续，仅仅只会建立不一样的css rule，而第二种写法会复制一遍base component的css rule，然后在增加不一样的举行css 权重掩盖。不引荐

固然，另有一种风趣的“继续” withComponent，我们能够应用withComponent转变衬着的标签

const Li = styled.li`
    color:#abcdef;
`;
const A = Li.withComponent('a'); // 将会衬着a标签

编译后他们会运用差别的className，这对我们想用同个款式，然则差别标签异常有效。

款式掩盖

这里所说的款式掩盖，主假如一些交互上的行动(hover, active)掩盖。实在组件继续也算是掩盖的一种。

以往我们的掩盖写法以下：

const ListItem = styled.li`
  padding: 0;
  height: 48px;
  
  &.left-item-focus {
    .left-link {
       background: ${props => props.color};
    }
  }
  &:hover {
     .left-icon {
        color: #9e9e9e; // 500
     }
  }
`;

而在styled中，我们能够运用styled-components 组件体式格局对我们的DOM举行援用，从而掩盖款式，以下

const Icon = styled.span`
    color: red;
`;

const ListItem = styled.li`

    &:hover ${Icon} {
        color: green;
    }
`;

这依旧是我们过去的思绪来掩盖款式，只是我们把挑选器直接运用styled组件援用罢了。具有如许的接口，就越发让我们无需去思索须要给组件取什么className或许id，从而到达掩盖款式的做法。但是另有我最喜好的别的一种写法。

TIPS：组件的援用必需是styled-components包装后的组件，直接是react的会报错

const ListItem = styled.li``;

const Icon = styled.span`
    color: red;
    
    ${ListItem}:hover & { // & 代表icon组件
        color: green;
    }
`;

这段代码完成的是一样的功用，只是我们思绪转换了一下。能够发明如许的代码越发没有侵入性。越发相符开放关闭准绳，当我们不须要这个Icon组件时，直接把这个Icon删除即可，我们不用去父组件里寻觅与该组件有关的款式，不容易形成款式污染。倏忽以为眼前一亮，有木有！

固然这类“子组件援用父级”的功用，另有越发普遍的援用。你能够挑选该DOM任何parent，再对本身举行款式的掩盖。以下：

const Icon = styled.span`
    color: red;
    
    html.ie-8 & {
        // fuck ie8
        color: blue;
    }
    body.xxx & {
        color: green;
    }
`;

当任何父级带有class都邑掩盖Icon的款式。这类“子组件援用父级”的功用也是我最喜好的功用没有之一。

在上面能够瞥见我们大批运用了&作为挑选器，而&另有别的的技能。

const Example = styled.li`
    color: red; 
    & {
        color:blue;
    }
    
    && {
        color: green;
    }
`;

人人能够猜猜，这终究会衬着成什么？

<li class='sc-gzVnrw fmpfVE'></li>

终究会编译成以下class，然则我们的一个&就代表一个class权重也就是说我们最后会衬着谅解色，原因是li被作用于了.fmpfVE.fmpfVE款式表。这个功用异常有效，比方在你运用第三方组件想要掩盖它的款式的时刻，我们就能够加多个&来进步款式权重，从而掩盖第三方组件的款式

Theme

关于Theme只想说一点，那就是连系第三方组件应当怎样传入Theme呢？我们有一个简朴的技能。比方运用了Material-UI，假如我们须要基于它拓展我们本身的组件，而且须要款式。

const ThemeProvider: React.SFC<ThemeProviderProps> = ({ themeName, children }) => {
  const theme = themes[themeName];
  return (
    <StyledThemeProvider theme={theme}>
      <MuiThemeProvider theme={theme}>
        {React.Children.only(children)}
      </MuiThemeProvider>
    </StyledThemeProvider>
  );
};

以后只须要把我们须要挪用的组件运用styled-components供应的withTheme包装一下我们的组件来猎取我们的theme。

如许既能够在我们的styled-components里取到theme，material里也能够了。

以上就是我们一切的技能了， 看了这么多有意思的黑科技，岂非你还不爱上styled-components吗？

个人网站 http://www.meckodo

Github: https://github.com/MeCKodo

    原文作者：二哲
    原文地址: https://segmentfault.com/a/1190000016246882
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞