styled-components

问题 I'm building a bundle with rollUp using styled-components. My rollup.config.js looks like: import resolve from 'rollup-plugin-node-resolve' import babel from 'rollup-plugin-babel' import commonjs from 'rollup-plugin-commonjs' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'cjs' }, external: [ 'react', 'react-proptypes' ], plugins: [ resolve({ extensions: [ '.js', '.json', '.jsx' ] }), commonjs({ include: 'node_modules/**' }), babel({ exclude: 'node_modules/*

问题 I know how to get the theme from components that are created using the styled way: const StyledView = styled.View` color: ${({ theme }) => theme.color}; `; But how to get from normal components or apply it for different properties ? Example: index.js <ThemeProvider theme={{ color: 'red' }}> <Main /> </ThemeProvider> main.js <View> <Card aCustomColorProperty={GET COLOR FROM THEME HERE} /> </View> Notice how the property that needs the theme is not called style 回答1: EDIT: As of v1.2, my pull

问题 How can I use conditional rendering in styled-components to set my button class to active using styled-components in React? In css I would do it similarly to this: <button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button> In styled components if I try to use '&&' in the classname it doesn't like it. import React from 'react' import styled from 'styled-components' const Tab = styled.button` width: 100%; outline: 0; border:

问题 I'm working with styled-components and generating components using their tagged template literal syntax such as: const Button = styled.button` background-color: papayawhip; border-radius: 3px; color: palevioletred; ` In one case I need to call a function that generates a media query based on a breakpoint and passes the tagged template literal of css to be included within. for example: media(12)` background-color: papayawhip; ` The media function might look something like this: const media =

问题 Here is my styled component. import * as React from 'react'; import styled from 'styled-components'; import { ComponentChildren } from 'app-types'; interface Props { children: ComponentChildren; emphasized: boolean; } const HeadingStyled = styled.h2` ${props => props.emphasized && css` display: inline; padding-top: 10px; padding-right: 30px; `} `; const Heading = (props: Props) => ( <HeadingStyled> {props.children} </HeadingStyled> ); export default Heading; I get warnings that: Property

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 2 months ago . I came across a ReactJS Boilerplate which had good reps and is community driven. Styling section emphasized more on styled component CSS but never stopped from switching to conventional CSS styling methodologies. Although this pulled my interests what makes the Styled-Component

问题 anyone got any experience using react-tooltip with styled-components ? I tried to wrap my tooltip inside a styled component but they styles weren't fully showing I wanted a yellow background but got a yellow background with a massive black border I also want to place the tooltip directly over the top of where I hover, can anyone show me how to do this if possible? code: <div> <ReactTooltip className="extraClass" effect="solid"> {'I shall be the text and this is where I will go'} <

问题 We want to use the material ui next components in our application where we're using styled components with SASS. To achieve this we use webpack and a raw-loader to import the generated CSS and apply the styles like so: const sidebarStyles = require('./Sidebar.sass'); const StyledDrawer = styled(Drawer)` ${sidebarStyles} ` We're trying this approach because styled components seem like a good method for styling react components, but we want to use regular sass files so our designers can create

问题 I've got theme object which looks like: { h1: { color: red }, h2: { color: blue } } And I would like to iterate through that object and dynamically create styled-component style definitions like: createGlobalStyle` ${props => Object.keys(props.theme).map(header => { return css` ${header}: { color: ${props.theme[header].color; } ` } ` The problem is that it is not working :( Have you maybe idea how to do so basic stuff like iterating through the object and dynamically create additional tagged

问题 How to delay opacity to zero when certain condition is met in styled-component? Is it doable using css? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; border-radius: 3px; opacity: ${props => (props.currentStep === props.steps ? 0 : 1)}; `; demo https://codesandbox.io/s/7k20zw5z10 What I want to achieve: the progress bar load till 100%, delay 1 second before the whole thing fade away. 回答1: const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; border