styled-components

问题 I'm a little confused on how to use the .attrs() function with TypeScript. Say I have the following: BottleBar.tsx: interface IBottleComponentProps { fill?: boolean } const BottleComponent = styled.div.attrs<IBottleComponentProps>(({fill}) => ({ style: { backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")` } }))<IBottleComponentProps` width: 20px; height: 20px; `; export default function BottleBar() { return ( <Wrapper> <BottleComponent />

问题 I'm new to unit testing and I've spent some 20-30 hours in docs, articles and YT videos but still can't make sense of how to achieve this. Basically I want to test 3 things here: Make sure that this component renders 3 components Test the conditional styling Test the click event So far, for the 1st thing, if I try to do: import { shallow } from "enzyme"; import React from "react"; import ButtonsComponent, { SchedButton } from "./ButtonsComponent"; it("renders three <MyButton /> components", (

问题 I'm new to unit testing and I've spent some 20-30 hours in docs, articles and YT videos but still can't make sense of how to achieve this. Basically I want to test 3 things here: Make sure that this component renders 3 components Test the conditional styling Test the click event So far, for the 1st thing, if I try to do: import { shallow } from "enzyme"; import React from "react"; import ButtonsComponent, { SchedButton } from "./ButtonsComponent"; it("renders three <MyButton /> components", (

问题 I tried to override style of component created by standard way of styled-components(styled.) and both the ways( styled() and style.extends ) worked for me. But when I am trying to override style of simple react component with styled() approach, its rendering the component but not overriding it's style. Below is snippet of code import React, { Component } from "react"; import styled from "styled-components"; export default class MyLabel extends Component { render() { return <label>{this.props

问题 I tried to override style of component created by standard way of styled-components(styled.) and both the ways( styled() and style.extends ) worked for me. But when I am trying to override style of simple react component with styled() approach, its rendering the component but not overriding it's style. Below is snippet of code import React, { Component } from "react"; import styled from "styled-components"; export default class MyLabel extends Component { render() { return <label>{this.props

问题 I tried to override style of component created by standard way of styled-components(styled.) and both the ways( styled() and style.extends ) worked for me. But when I am trying to override style of simple react component with styled() approach, its rendering the component but not overriding it's style. Below is snippet of code import React, { Component } from "react"; import styled from "styled-components"; export default class MyLabel extends Component { render() { return <label>{this.props

问题 I'm using CRA with Material-ui and Styled Components type of styling. When building my CSS I want to access Material-ui's default theme. part of package.json: "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1", "@material-ui/core": "^4.2.1", "@material-ui/icons": "^4.2.1", "@material-ui/styles": "^4.2.1", "styled-components": "^4.3.2" } When I try the below theme exists on props but is an empty object. StyledApp.js: import styled from "styled-components";

问题 I'm using CRA with Material-ui and Styled Components type of styling. When building my CSS I want to access Material-ui's default theme. part of package.json: "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1", "@material-ui/core": "^4.2.1", "@material-ui/icons": "^4.2.1", "@material-ui/styles": "^4.2.1", "styled-components": "^4.3.2" } When I try the below theme exists on props but is an empty object. StyledApp.js: import styled from "styled-components";

问题 The bounty expires in 4 days . Answers to this question are eligible for a +50 reputation bounty. machineghost wants to reward an existing answer : I lost way too many hours to this issue, and wanted to reward this excellent solution! I just installed the styled-components library and started playing with it. However this simple example: import React from 'react' import styled from 'styled-components' const Div = styled.div`background: red;` const AlertCard = () => ( <Div>Hello World</Div> )

问题 Is it possible to use the spread operator with a styled component in React Native? I have this component: const StyledHeaderText = styled.Text` fontFamily: ${props => props.theme.font}; fontSize: ${props => props.theme.fontSizeSubtitle}; color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor} `; But lets say that in my theme, I have an object that has both the fontFamily and the fontSize, and I re use all over the app. I would like to be able to know if I