如何为样式组件中的值传递变量/文字？

Question

我总是使用道具，因为它是管理不同用例的基本方法，但我正在尝试更改边框颜色在焦点状态期间样式化的输入（是否可以将道具分配给焦点状态？）。

我熟悉使用道具，但即使在样式组件中，我也无法分配给变量。我不能说{props => props.focused ? accentCol : null}。我能够分配变量的唯一方法是通过内联样式。但是，afaik 无法通过内联样式访问焦点状态：/

const accentCol = `{some redux function which retrieves different colors in different scenarios`

const styledInput = styled.input`
  background: #181a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  &::placeholder {
  }
  &:focus {
    outline: none !important;
    border: solid 2px accentCol !important;
  }
`

如何将边框颜色分配给变量？

Answer 1

按照文档说明：

const StyledInput = styled.input`
  &:focus {
    outline: none;
    border: solid 2px ${(props) => props.focusBorder};
  }
`;

function App() {
  return (
    <>
      <StyledInput focusBorder="red" />
      <StyledInput focusBorder="blue" />
    </>
  );
}

https://codesandbox.io/s/styled-focus-etf4pd

Answer 2

interface IProps {
  focus: string,
}

const variantsfocus = {
  primary: 'solid 2px accentCol',
};

const StyledInput = styled.input<IProps>`
  background: #181a1a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  &::placeholder {
  }
  &:focus {
    outline: none !important;
    border: ${props => variantsfocus[props.focus]};
  }
`

我希望这会有所帮助，您必须在组件中传递道具，例如

<StyledInput focus="primary" />

This link may be helpful also。