styled-components

问题 I am having two issues with using styled components in a hoc wrapper in react. The component is rendered, but not with the background color. The ComponentWithAddedColors is not valid typescript. Don't know why. Anyone who can help with this? interface IProps { id: string; left: number; top: number; } export const Node: React.FC<IProps> = ({ id, left, top }) => { return ( <Container left={left} top={top}> {id} </Container> ); }; function withColors<T>(Component: React.ComponentType<T>) { const

问题 I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem.

问题 You can see an example of what I am trying to do here: https://codesandbox.io/s/vibrant-leaf-qj8vz Note: this particular example is using Twin.macro with Styled Components. On my local computer I tried the same thing with the same results using Twin.macro with emotion/next.js. Here is a sample component illustrating what I am trying to do: import React from 'react' import tw from 'twin.macro' const Acme = ({ children, type }) => <div css={[tw`${type}`]}>{children}</div> export default Acme

问题 I am extending Textarea and I want completed to be accessed by StyledItemTextarea but not Textarea . How can I achieve this? import Textarea from 'react-textarea-autosize'; const TextareaAutosizeSC = styled(Textarea)` ... `; const StyledItemTextarea = TextareaAutosizeSC.extend` color: ${({ completed }) => completed ? '#ccc' : '#fff'}; `; const MyTextarea = ({ completed }) => <StyledItemTextarea completed={completed} />; 回答1: Maybe like this: const TextareaAutosizeSC = ({ completed, ...rest })

问题 Is there a possibility to use the Material-UI "theme"-prop with styled-components using TypeScript ? Example Material-UI code: const useStyles = makeStyles((theme: Theme) => ({ root: { background: theme.palette.primary.main, }, })); Now I want to replace this code with styled-components. I have tested the following implementation (and other similar implementations) without success: const Wrapper = styled.div` background: ${props => props.theme.palette.primary.main}; `; 回答1: You can use

问题 I am trying to style a slider with styled-components for React, but I do not get how I can style the thumb. I have a CSS that looks like this: .faderInput::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border:1px solid black; ... } and my styled component looks like this const FaderInput = styled.input` ... ::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border:1px solid black; ... } `; Does anybody know how I can port this class

问题 I am using react semantic ui Dropdown : https://react.semantic-ui.com/modules/dropdown/ and styled-components : https://styled-components.com/ And when I do the following (in React render method), it works well: <Dropdown placeholder="Select tags" multiple fluid selection options={tagOptions} onChange={this.navigateToTag} /> I can select multiple items in it. But now I am trying to style it the following way: const SelectTagsDropdown = styled(Dropdown)` margin: ${props => props.margin || '1em

问题 I have created a Dropdown Component in React using Styled Components. Here is a simplified outline of the component: const Dropdown = ( <DropdownBase> <Trigger> {title} </Trigger> <Submenu> {children} </Submenu> </DropdownBase> ) const DropdownBase = styled.div` /* Default Styles */ ` const Trigger = styled(Link)` /* Default Styles */ ` const Submenu = styled.div` /* Default Styles */ ` Now, when I import and use the component I want to be able to override the default styles of the nested

问题 Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene? const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` render( <div> <Button href="https://github.com

问题 Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene? const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` render( <div> <Button href="https://github.com