javascript - 样式组件 - 创建类方法？

Question

我需要一种方法来创建没有 styled 的类也不css方法。

让我们假设适当的样式系统，其组件只有基本样式，但没有定位、边距等。

例如

const Root = styled.div`/* Some styles */`

export const MyComponent = ({className}) => <Root className={className} />

所以这很简单，我为组件附加私有(private)样式，并允许它从父级接收和应用类。

如果我有“经典”css，我会这样使用它

import styles from 'some-styles.module.css';

...

<MyComponent className={styles.someStyle} />

这将按预期工作。

问题是:

如何使用 styled-components 创建一个类仅有的？它正在与 Glamorous 合作一次，但 SC(和 Emotion)不从 css 返回类名.

我不能使用单独的 css 文件来允许这种样式，这应该是常见的用例(父设置子项的大小)

在Emotion中编辑和解决

我发现 Emotion 添加了额外的属性 css它适用于每个 jsx 元素。可用于原生<div> , 风格 <Div>或自定义 React 组件 <MyComponent .Babel 正在改变css属性为 css({...})在编译期间添加到 className。如果<MyComponent>只接受 Prop className它将通过 css 从父级接收它 Prop 。

Answer 1

I still belive I should be able to somehow pass styles from parent to child.

有一种方法可以做到这一点，但并不完全是您想要的方法。

在 React js 中(你还不能在 React Native 中这样做)，你可以将子组件传递到父样式中，当它被父组件包装时，它会在子组件中添加样式。

例如

const ParentComponent = styled.div`
    ${ChildComponent} {
         /* Child css*/
    }
`

抱歉，如果格式不好，我在手机上