如何将自定义 CSS 添加到现有样式组件？

Question

我有一个与样式组件相关的问题。我有一个预写的 Select 组件，我想使用它编写自己的 select 组件。这是我写的一些代码。

in the Comopnent.tsx

...
import Select from './Select'

const StyledSelect = styled(Select)`
  // CUSTOMIZED STYLES
  height: 25px;
  border-radius: 10px;
  cursor: default;
`

...

const Component1:React.FC = () => {
  ...

  return (
    <StyledSelect
        options={[
          {
            label: t('Hot'),
            value: 'hot',
          },
          {
            label: t('APR'),
            value: 'apr',
          },
          {
            label: t('Multiplier'),
            value: 'multiplier',
          },
          {
            label: t('Earned'),
            value: 'earned',
          },
          {
            label: t('Liquidity'),
            value: 'liquidity',
          },
        ]}
        onChange={handleSortOptionChange}
      />
  )
}
...

in the Select.tsx

...
const DropDownContainer = styled.div<{ isOpen: boolean; width: number; height: number }>`
  cursor: pointer;
  width: ${({ width }) => width}px;
  position: relative;
  ...
`

const Select:React.FunctionComponent<SelectProps> = ({options, onChange}) => {
  ...

  return (
    <DropDownContainer isOpen={isOpen} ref={containerRef} {...containerSize}>
      {containerSize.width !== 0 && (
        <DropDownHeader onClick={toggling}>
          <Text>{options[selectedOptionIndex].label}</Text>
        </DropDownHeader>
      )}
      <ArrowDropDownIcon color="text" onClick={toggling} />
      <DropDownListContainer>
        <DropDownList ref={dropdownRef}>
          {options.map((option, index) =>
            index !== selectedOptionIndex ? (
              <ListItem onClick={onOptionClicked(index)} key={option.label}>
                <Text>{option.label}</Text>
              </ListItem>
            ) : null,
          )}
        </DropDownList>
      </DropDownListContainer>
    </DropDownContainer>
  )
}
...

但是自定义样式不起作用。我在将自定义 CSS 添加到上面的现有样式组件方面有一些类似的经验，但我不知道为什么这不起作用。我有什么错？

Answer 1

您忘记接受属性类名并将其设置在需要的元素上。下面是一个例子。注意props中的className，设置到容器中。

要为组件设置样式，您需要传递 className 道具。在获取 className 属性的组件中，您需要将其分配给需要设置样式的元素，如下所示：

注意 Link 如何获取类名并将其分配给元素“a”。

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

更多详细信息，请查看官方文档。 https://styled-components.com/docs/basics#styling-any-component

const Select:React.FunctionComponent<SelectProps> = ({options, onChange, className}) => {
  ...

  return (
    <DropDownContainer className={className} isOpen={isOpen} ref={containerRef} {...containerSize}>
      {containerSize.width !== 0 && (
        <DropDownHeader onClick={toggling}>
          <Text>{options[selectedOptionIndex].label}</Text>
        </DropDownHeader>
      )}
      <ArrowDropDownIcon color="text" onClick={toggling} />
      <DropDownListContainer>
        <DropDownList ref={dropdownRef}>
          {options.map((option, index) =>
            index !== selectedOptionIndex ? (
              <ListItem onClick={onOptionClicked(index)} key={option.label}>
                <Text>{option.label}</Text>
              </ListItem>
            ) : null,
          )}
        </DropDownList>
      </DropDownListContainer>
    </DropDownContainer>
  )
}
...

如何将自定义 CSS 添加到现有样式组件？

How to add custom CSS to existing styled component?

reactjs

styled-components

react-functional-component