styled-components

问题 Hello i have a menu which is working normally I use the property to set its size open and closed and also in mobile resolution. But I tried to do the same with my content grid my second column and not getting the value I don't know if it has to do with calc: code: <ContainerGrid style={{background: '#eee'}}> {/* <ContainerGridColumn mobile={2} > */} <ContainerGridColumnMenu status={open ? '12.5%' : '50px'} mobile= {open ? '31.25%' : '12.5%'} > <div style={{background:'#000', width:'100%',

问题 When I was building my application, I didn't realize that I am going to end up with more than a hundred styled components. Consequently, I was putting them in the same file like this: export const StyledTabs = styled(Tabs)` display: inline-flex !important; margin-left: 15% !important; `; export const StyledTab = styled(Tab)` display: inline-flex !important; margin-left: 0% !important; padding: 0 !important; `; ... And the application imports them like this: import { StyledTabs, StyledTitle }

问题 I want to wrap up my ant-design components with styled-components, I know that this is possible (https://gist.github.com/samuelcastro/0ff7db4fd54ce2b80cd1c34a85b40c08) however I'm having troubles to do the same with TypeScript. This is what I have so far: import { Button as AntButton } from 'antd'; import { ButtonProps } from 'antd/lib/button/button'; import styledComponents from 'styled-components'; interface IButtonProps extends ButtonProps { customProp: string; } export const Button =

问题 Build a default react-native application, with Typescript and add styled-components, reference it in the app and attempt to compile causes the following error: node_modules/styled-components/typings/styled-components.d.ts(116,44): error TS2503: Cannot find namespace 'NodeJS'. Please see repo to reproduce. https://github.com/StevenTCramer/Issue1 回答1: You will need install @types/node with npm in order to pick up the NodeJS namespace. $ npm install --save-dev @types/node 来源： https:/

问题 I'm having a trouble of rendering pseudo before content dynamically in styled-components. Am I doing something wrong? I have no problem when I render pseudo before content statically, but it doesn't work when I try it dynamically. React Component const Test = (props) => { return ( <Text before={12345}> {props.children} </Text> ); }; Styled Component(Not Work) const Text = styled.span` &:before { content: ${props => { console.log(props.before); // I see '12345' in log. return props.before; } }

问题 Using typescript and want to set styling for Material UI component with styled-components. But type error happens with StyledComponent showing Type '{ children: string; }' is missing the following properties import React, { PureComponent } from 'react'; import styled from 'styled-components'; // ^4.1.3 import { Button } from '@material-ui/core'; // ^3.9.1 class TestForm extends PureComponent { render() { return ( <> <Button style={{ backgroundColor: 'red' }}>Work</Button>{/* OK */}

问题 This question already has an answer here : styled-components: parent styles has more priority then child (1 answer) Closed 2 years ago . Reproduction Expected: palevioletred color of Title, and red of TitleWithoutColor (theme styles triggered) Got: red everywhere Why: The rule that leads to this is like: p.column { text-align: right; } can be overwritten by body p.column { text-align: left; } , cause it more specific Question: how to write themes so that styles of components would have bigger

问题 image export const LogOutButton = styled.button` display: inline-block; .... `; export default styled(ThemedApp)` .... button { .... display: flex; .... } `; as you see, Logout button (has class gBuhXv ) has display: flex , instead of inline-block , because priority of parent( ThemedApp , .jCe... ) is bigger The rule that leads to this is p.column { text-align: right; } can be overwritten by body p.column { text-align: left; } , cause it more specific Its right behavior, but not that I expect

问题 I'm using styled-components and polished for darkening/lightening the colors. Here's what I have now working: colors = ['#eee', '#ccc', '#ddd']; const calcBorderColor = ({ currentPosition }) => { const color = colors[(currentPosition) % colors.length]; return color; }; const Choice = styled.button` border-color: ${calcBorderColor}; `; Where I'm stuck is here: &:hover { border-color: ${darken(0.1, calcBorderColor)}; } That hover styling is error with Passed an incorrect argument to a color

问题 I'm trying to make a Sticky Header that can change its background-color based on his position on the page. To do that, I'm trying to add a className "active" to my Styled Component "StyledHeader" that will appears when the scrollPositionY is above 400px and disappear when below. In other words, what I want to do is something like this but using React.JS, JSX syntax and Styled Components. Here's what I have for now: import { Link } from '@reach/router'; import DuskLogo from '../images/dusk