styled-components

问题 Is there a way to use styled-components together with react-bootstrap? react-bootstrap exposes bsClass properties instead of className for their component which seems to be incompatible with styled-components. Any experiences? 回答1: You can extend the style keeping the original styles of the component from bootstrap. You will find more documentation on using third party libraries like react bootstrap with styled-components here. const StyledButton = styled(Button)` color: palevioletred; font

问题 Material UI has a nice set of built-in media queries: https://material-ui.com/customization/breakpoints/#css-media-queries Material UI also allows us to use Styled-Components with Material UI: https://material-ui.com/guides/interoperability/#styled-components I want to know how to combine the two together. That is, how can I make media queries using Styled Components and Material-UI's built-in breakpoints? Thanks. UPDATE: Here is an example of what I am trying to do: import React, { useState

问题 I have a navbar component that I have created using Styled Components. I would like to create some props that change the background-color and/or text color. For instance: <Navbar dark> should have the following CSS: background: #454545; color: #fafafa; Whereas <Navbar light> should be the opposite: background: #fafafa; color: #454545; If, however, neither prop is used, then I want to have a default background and text color -- say (for demo purposes), something like this: background: #eee;

问题 I have an SVG I'm using as an <img> tag. Using Styled Components I am trying to get to a point where I change the stroke color upon hover. I imported the SVG: import BurgerOpenSvg from '../../images/burger_open.svg'; I Created a Styled Components for it: const BurgerImageStyle = styled.img` &:hover { .st0 { stroke: red; } } `; And I use it: <BurgerImageStyle alt="my-burger" src={BurgerOpenSvg}/> The result is, my SVG is displayed correctly, but no color change upon hovering. Source for the

问题 I have an SVG I'm using as an <img> tag. Using Styled Components I am trying to get to a point where I change the stroke color upon hover. I imported the SVG: import BurgerOpenSvg from '../../images/burger_open.svg'; I Created a Styled Components for it: const BurgerImageStyle = styled.img` &:hover { .st0 { stroke: red; } } `; And I use it: <BurgerImageStyle alt="my-burger" src={BurgerOpenSvg}/> The result is, my SVG is displayed correctly, but no color change upon hovering. Source for the

问题 I am trying to add class names to a React Component to make it easier for me to customize that component using Styled Components. Here is a simplified outline of the component: const SignupForm = props => ( <form> <Input className="input" /> <Button className="button" /> </form> ) And here is how I would like to use it: import { SignupForm } from '../path/to/signup-form' <Form /> ... const Form = styled(SignupForm)` .input { /* Custom Styles */ } .button { /* Custom Styles */ } ` However,

问题 I'm trying to extend styles for a react component using styled-components but is not working. AFAIK, I'm doing it the right way, but perhaps I'm missing something... Here is what I have: import React from "react"; import styled from "styled-components"; const TextContainer = ({ text }) => { return <p dangerouslySetInnerHTML={{ __html: text }} />; }; const Paragraph = styled(TextContainer)` background: red; `; class Home extends React.Component { render() { const { t } = this.props; return

问题 I'm trying to extend styles for a react component using styled-components but is not working. AFAIK, I'm doing it the right way, but perhaps I'm missing something... Here is what I have: import React from "react"; import styled from "styled-components"; const TextContainer = ({ text }) => { return <p dangerouslySetInnerHTML={{ __html: text }} />; }; const Paragraph = styled(TextContainer)` background: red; `; class Home extends React.Component { render() { const { t } = this.props; return

问题 TypeScript newbie here. I have a below component using styled-components that I would like to convert to TypeScript . import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' const propTypes = { name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline } const Icon = styled(({name, className, ...props}) => <i className={`material-icons ${className}`} {...props}>{name}</i>)` font-size: ${props => props.theme.sizeLarger}; `

问题 I just read in the styled-components documentation that the following is wrong and it will affect render times. If that is the case, how can I refactor the code and use the required props to create a dynamic style? Thank you in advance. Tab component import React from 'react' import styled from 'styled-components' const Tab = ({ onClick, isSelected, children }) => { const TabWrapper = styled.li` display: flex; align-items: center; justify-content: center; padding: 100px; margin: 1px; font