styled-components

问题 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

问题 I am in the process of upgrading the dependencies of a React project. I upgraded styled-components from 1.4.4 to 2.5.0-1 . I didn't expect any breaking changes since I read that styled-components v2 is a drop-in replacement for v1. I don't see any breaking changes in the web app, but my test cases are broken. Consider the following, dumb and useless test. test('does something', () => { expect(true).toBe(true); }); As expected, the test works. However, as soon as I even try to import a styled

问题 I write styled components like in react-native , as a js object: const SectionTitle = styled.div({ fontSize: '25px', display: 'flex', }) Is it possible to use media queries with the above object style? 回答1: Yes, this is possible. You just need to wrap your object keys with quotes to form a string from a media query rule. For example: const SectionTitle = styled.div({ fontSize: '25px', display: 'flex', '@media(min-width: 788px)': { fontSize: '40px' } }) 来源： https://stackoverflow.com/questions

问题 Good evening. I am facing an issue while using react in combination with styled components. I have an image folder located in : And I have my styled components in the following folder : Inside the styled components I'm trying to import the image like this : const FormImage = styled.div` width: 150px; height: 150px; margin: 0 auto; margin-top: -20%; background-image: url(../../img/testlogo.png); `; Im sure this is the right path. But somehow the image is not showing in the browser. This is

问题 Good evening. I am facing an issue while using react in combination with styled components. I have an image folder located in : And I have my styled components in the following folder : Inside the styled components I'm trying to import the image like this : const FormImage = styled.div` width: 150px; height: 150px; margin: 0 auto; margin-top: -20%; background-image: url(../../img/testlogo.png); `; Im sure this is the right path. But somehow the image is not showing in the browser. This is

问题 I'm having trouble getting media queries to work with media templates and styled components. I defined a MediaQueries template straight from the docs: MediaQueries.js import { css } from "styled-components"; const sizes = { desktop: 992, tablet: 768, phone: 576 }; // Iterate through the sizes and create a media template const media = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` @media (max-width: ${sizes[label] / 16}em) { ${css(...args)} } `; return acc; }, {});

问题 I want to add styles to my component wrapper using higher order component. Typescript says there is error with ComponentWithAdddedColors . type Props = { bg?: string; }; function withColors<TProps>( Component: React.ComponentType<TProps> ): React.ComponentType<TProps & Props> { const ColoredComponent: React.ComponentType<TProps & Props> = props => { const { bg, ...componentProps } = props; const ComponentWithAdddedColors = styled(Component)` ${bg && `background: ${bg};`} `; return

问题 I am trying to pass a background image through a prop and it's not working, it's saying that url is undefined. const CardImage = styled.div` height: auto; width: 100%; background-size: contain; background: url(${props => props.data.url}); ` function Card(props) { return ( <CardImage/> ) } <Card data={{url: "https://via.placeholder.com/150x150", text: "test"}}/> 回答1: You are never passing the props from Card to <CardImage/> : function Card(props) { return <CardImage {...props} />; } 回答2:

问题 I'm running npm test and getting the following error: FAIL src/App.test.js ● Test suite failed to run TypeError: symbol is not a function at String (<anonymous>) 3 | import styled from "styled-components"; 4 | > 5 | const NoAccess = styled(NoAccess_)` | ^ 6 | width: 100px; 7 | height: 75px; 8 | `; at options (node_modules/styled-components/src/models/StyledComponent.js:265:68) at je (node_modules/styled-components/src/models/StyledComponent.js:265:68) at Object.<anonymous> (src/App.js:5:18)

问题 styled-components have a plugin that allows for the following: <div css={` background: papayawhip; color: ${props => props.theme.colors.text}; `} /> Is there any way I can tell TypeScript css is a valid property on all elements? 回答1: Add following line to a TypeScript file inside your project as described in this issue: // e.g. src/global.d.ts import {} from "styled-components/cssprop" // or TS 3.8+ import type {} from "styled-components/cssprop" Alternatively you can manually augment the