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

Question

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

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

例如：

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

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

因此，这很容易，我为组件附加私有样式，并允许它从父级接收和应用类。

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

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

...

<MyComponent className={styles.someStyle} />

它会像预期的那样起作用。

这里的问题是：

如何只使用styled-components创建类？它曾经使用过Glamorous，但是SC (和情感)没有从css返回类名。

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

编辑与情感中的解决方案

我发现情感增加了额外的属性css，它适用于每一个jsx元素。它可以用于本机<div>、样式<Div>或自定义的React组件<MyComponent。在编译期间，Babel使用css({...})将css({...})属性更改为className。如果<MyComponent>只接受className，那么它将通过css螺旋桨从父级接收它。

Answer 1

，我仍然相信，我应该能够在父母之间传递风格给孩子。

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

在react中(您还不能在中这样做)，您可以在父样式内传递子组件，并且当其子组件被父样式包装时，它将在其子元素中添加样式。

例如：

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

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