☰

styled-components がカスタム機能 React コンポーネントにスタイルを適用しない 質問する

tag-icon • tag-icon javascript reactjs styled-components
styled-components がカスタム機能 React コンポーネントにスタイルを適用しない 質問する

カスタム機能Reactコンポーネントのスタイルを設定するために使用する場合styled-components、スタイルは適用されません。ここに簡単な例スタイルが適用されていない箇所StyledDiv:

const Div = () => (<div>test</div>)
const StyledDiv = styled(Div)`
  color: red;
`;

スタイルが正しく適用されるようにするための最善の方法は何ですか?

ベストアンサー1

からドキュメント:

styled メソッドは、レンダリングされたサブコンポーネントに className プロパティを渡し、そのサブコンポーネントもそれを渡すなど、独自のコンポーネントやサードパーティのコンポーネントすべてで完璧に機能します。最終的には、スタイル設定を有効にするには、className を実際の DOM ノードに渡す必要があります。

たとえば、コンポーネントは次のようになります。

const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
`;

変更された例:

const styled = styled.default
const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
  font-size: larger;
`;
const App = () => {
  return(<StyledDiv>Test</StyledDiv>)
}

ReactDOM.render(<App />, document.querySelector('.app'))
<script src="//unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="//unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.9/styled-components.min.js"></script>
<div class="app"></div>

おすすめ記事