styled-components

问题 How do I change my headers color based on what route/page I am on in my React project? I have looked at withRouter but I am not sure how to use the example. I just want to do something like if the route is not the Home component then change the background color of the header to blue. Seems like it would be simple but can't figure it out. 回答1: You can use the location prop that is added to your component by connecting the component to the router via withRouter . From there you apply a

问题 How do I change my headers color based on what route/page I am on in my React project? I have looked at withRouter but I am not sure how to use the example. I just want to do something like if the route is not the Home component then change the background color of the header to blue. Seems like it would be simple but can't figure it out. 回答1: You can use the location prop that is added to your component by connecting the component to the router via withRouter . From there you apply a

问题 trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).attach() export default function(props) { return ( <div> <Widget1 className={classes.myStyles}/> <Widget2 className={classes.myStyles}/> </div> ) } my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components? 回答1: You can either share actual CSS

问题 trying to port some code from jss to styled-components, jss code looks something like: //... const styles = { myStyles: { color: 'green' } } const {classes} = jss.createStyleSheet(styles).attach() export default function(props) { return ( <div> <Widget1 className={classes.myStyles}/> <Widget2 className={classes.myStyles}/> </div> ) } my question is what would be the idiomatic way to accomplish this sharing of the same styles across multiple components? 回答1: You can either share actual CSS

问题 I recently started using Gatsby for building my websites, previously I relied just on plain html and css, so I may be missing something really basic here... I am trying to style a custom header component that looks like this import React from "react" import MWidth from "./m-width" import logo from "../resources/images/logo.png" function Header() { return ( <> <MWidth> <div> <img src={`${logo}`}></img> </div> </MWidth> </> ) } export default Header after importing it inside the layout

问题 I have the following code: // @flow import React from 'react'; import { Route } from 'react-router-dom'; import Split from '../../components/grouping/Split'; import CenterBox from '../../components/grouping/CenterBox'; import styled from 'styled-components'; type Props = { routes: Array<Object>, background: String }; export default ({ routes, background }: Props) => (<div> <Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}> <div /> <div>This feature will be available

问题 I have the following code: // @flow import React from 'react'; import { Route } from 'react-router-dom'; import Split from '../../components/grouping/Split'; import CenterBox from '../../components/grouping/CenterBox'; import styled from 'styled-components'; type Props = { routes: Array<Object>, background: String }; export default ({ routes, background }: Props) => (<div> <Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}> <div /> <div>This feature will be available

问题 I have the following code: // @flow import React from 'react'; import { Route } from 'react-router-dom'; import Split from '../../components/grouping/Split'; import CenterBox from '../../components/grouping/CenterBox'; import styled from 'styled-components'; type Props = { routes: Array<Object>, background: String }; export default ({ routes, background }: Props) => (<div> <Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}> <div /> <div>This feature will be available

问题 I have the following code: // @flow import React from 'react'; import { Route } from 'react-router-dom'; import Split from '../../components/grouping/Split'; import CenterBox from '../../components/grouping/CenterBox'; import styled from 'styled-components'; type Props = { routes: Array<Object>, background: String }; export default ({ routes, background }: Props) => (<div> <Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}> <div /> <div>This feature will be available

问题 I have the following svg component where I am passing props. import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ); I then have a styled-component that looks like this. const Icon = styled(_Icon)` ${props => props.isActive && css` transform: rotate(-180deg); `}; `; I am seeing the following react error. Warning: React does not recognize the isActive prop on a DOM element. 回答1: I ran into the same issue with