可以用伪类转换样式对象以在样式组件中使用吗？

Question

我正在重构一个使用 Tailwind + Emotion 的大型组件库，并将两者替换为样式化组件。有一种实用方法可以返回一个或多个如下所示的样式对象：

{
    "backgroundColor": "var(--sb-colors-primary-20, #F0F2F4)",
    ":focus-within": {
        "backgroundColor": "var(--sb-colors-primary-20, #F0F2F4)",
        "borderWidth": "1px",
        "borderColor": "var(--sb-colors-primary-50, #ADB5BD)"
    },
    ":hover": {
        "backgroundColor": "var(--sb-colors-primary-30, #DEE2E6)"
    }
}

这个实用程序将会存在一段时间，直到使用它的所有组件都被重构为止。然后就可以解决了。

那么，知道了这一点，有什么方法可以将这样的对象（或对象数组）转换为样式组件可以使用并尊重伪类的东西吗？我会将它作为瞬态道具传递到样式组件中。

Answer 1

目前，您可以将这些样式作为内联样式道具传递到新组件中，我正在考虑类似的事情：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import styled from "styled-components";

function myUtilityFunction() {
  return {
    backgroundColor: "var(--sb-colors-primary-20, #F0F2F4)",
    ":focus-within": {
      backgroundColor: "var(--sb-colors-primary-20, #F0F2F4)",
      borderWidth: "1px",
      borderColor: "var(--sb-colors-primary-50, #ADB5BD)"
    },
    ":hover": {
      backgroundColor: "var(--sb-colors-primary-30, #DEE2E6)"
    }
  };
}

const MyStyledComponent = styled.div`
  ${(props) => props.styles}
`;

export default function App() {
  return <MyStyledComponent styles={myUtilityFunction()}>Hello</MyStyledComponent>;
}


const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

:root {
  --sb-colors-primary-20: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/6.0.7/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>