1

我需要一种方法来创建没有stylednorcss方法的类。

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

例如

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（和 Emotion）没有从css.

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

Emotion 中的编辑和解决方案

我发现 Emotion 添加了css可用于每个 jsx 元素的额外属性。它可以用于原生<div>、样式化<Div>或自定义 React 组件<MyComponent。Babel在编译期间将css属性更改css({...})为 className。如果<MyComponent>只接受 prop className，它将通过cssprop 从父级接收。

4

1 回答 1

0

我仍然相信我应该能够以某种方式将风格从父母传给孩子。

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

在 react js 中（你还不能在 React Native 中这样做），你可以在父样式中传递子组件，当它被父包裹时，它会在子组件中添加样式。

例如

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

对不起，如果格式不好，我在手机上

于 2019-12-23T22:08:02.783 回答