代码之家 › 专栏 › 技术社区 › Diego Oriani

将经过的道具与样式化的组件进行反应

styled-components reactjs javascript

Diego Oriani · 技术社区 · 6 年前

我刚在报纸上看到 styled-components documentation

选项卡组件

import React from 'react'
import styled from 'styled-components'

const Tab = ({ onClick, isSelected, children }) => {
    const TabWrapper = styled.li`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    margin: 1px;
    font-size: 3em;
    color: ${props => (isSelected ? `white` : `black`)};
    background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
    cursor: ${props => (isSelected ? 'default' : `pointer`)};
`

    return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}


export default Tab

2 回复 | 直到 6 年前

dropbeardan 6 年前

我相信文档所说的是,您应该避免在渲染组件中包含样式:

做这个

const StyledWrapper = styled.div`
  /* ... */
`

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>
}

而不是这个

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `

  return <StyledWrapper>{message}</StyledWrapper>
}

因为当组件的道具发生变化时,组件将重新渲染,样式将重新生成。因此,将其分开是有意义的。

如果你继续读下去 基于道具的改编

const Button = styled.button`
  /* Adapt the colours based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// class X extends React.Component {
//  ...

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

// }

这是因为当你使用按钮

const TabWrapper = styled.li`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  margin: 1px;
  font-size: 3em;
  color: ${props => (props.isSelected ? `white` : `black`)};
  background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
  cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;

const Tab = ({ onClick, isSelected, children }) => {
  return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}

const X = <Tab onClick={() => console.log('clicked')} isSelected>Some Children</Tab>

我还没有测试这个在所有,所以请随时尝试它,让我知道它是否为您或任何为您工作!

Jöcker Blejzer 4 年前

可以通过Typescript传递参数,如下所示:

<StyledPaper open={open} />    

...

const StyledPaper = styled(Paper)<{ open: boolean }>`
   top: ${p => (p.open ? 0 : 100)}%;
`;

Cisum Inas 6 年前

考虑样式化组件文档给出了为不同主题使用reacts上下文api[2]的示例。

[1] https://www.styled-components.com/docs/advanced

[2] https://reactjs.org/docs/context.html

Felipe Chernicharo 4 年前

import styled from 'styled-components'

interface StyledLiProps{
  selected: boolean
}

export const TabWrapper = styled.li`
    
// styles ...

color: ${props => (selected ? `white` : `black`)};
background-color: ${props => (selected ? `black` : `#C4C4C4`)};
`

别忘了在JSX标记中声明你想在CSS中使用的道具

interface TabProps{
  text: string;
}

const Tab = ({ text }: TabProps) => {
 
//...
  
return <TabWrapper selected={isSelected} onClick={() => updateTab}>{text}</TabWrapper>


}

galo hernandez 4 年前

有关功能组件的更简单示例:

假设你有一个箭头状的多边形,你需要其中两个指向不同的方向。因此可以通过道具传递旋转值

               <Arrow rotates='none'/>
          
               <Arrow rotates='180deg'/>

然后在组件箭头中,您必须像普通组件一样将道具传递给样式化组件,但在样式化组件中,您必须像道具一样使用道具:

    import React from 'react';
    import styled from "@emotion/styled";

    const ArrowStyled = styled.div`
      background-color: rgba(255,255,255,0.9);
      width: 24px;
      height: 30px;
      clip-path: polygon(56% 40%,40% 50%,55% 63%,55% 93%,0% 50%,56% 9%);
      transform: rotate(${props => props.rotates});
     `


const Arrow = ({rotates}) => {
    return (
       <ArrowStyled rotates={rotates}/>
    );
}

export default Arrow;