3

スタイル付きコンポーネントで問題が発生しています。これが技術的な制限なのか、それとも使用方法に関する私のメンタル モデルが間違っているのかわかりません。

この例 (Codepen で簡単に書いたので、スペルミスは無視してください) には、スパン内のユーザー名であるコンポーネントがあります。そのコンポーネントをどこでも使用できるようにしたいので、スタイリングは最小限に抑えています。

// From User.js    
import React from 'react';
import styled from 'styled-components';

const Username = styled.span`
  color: black;
`

const User = () => (
  <UserName>bla</Username>
);

export default User;

このスパンを別のコンポーネントで使用できるようにしたいのですが、その場合は、このコンテキストでスタイリングをオーバーライドしたいと考えています。

// From Userblock.js
import React from 'react';
import styled from 'styled-components';
import User from './user';

const UserWrapper = styled.div`
  // Some styles
`

const User = styled(User)`
  color: red; // Different color when displayed in a UserBlock
`

const UserBlock = () => (
  <UserWrapper>
    <User />
  </UserWrapper>
);

export default UserBlock;

私が知っていることから、それはサードパーティのコンポーネントにスタイリングを設定する方法です (そして、それは私のアプリケーションの他の場所で機能します)。

また、メンタル モデルの質問に戻りますが、これは、スタイル コンポーネントを使用している場合に行うべき方法ですか?

助けてくれてありがとう！

4

1 に答える 1