styled-components

问题 I have a problem which I'll try to describe as best I can: I have an absolute div which is invisible. I have an icon which when hovered, the absolute div is visible. Now, I want to center the absolute div according to the icon. The problem is in order to the center the absolute div to the icon, I need the icon's position property to be position: relative . This is a problem because the icon is in a div which has overflow: hidden , thus, the absolute div gets cropped. If I put the absolute div

问题 I use Styled Components as CSS alternative for my React App. In development everything works fine (first screenshot), but when I run a production build ( npm build ), styles within style tags are stripped out (second screenshot). As a result, there're no styles in the production build. Here is the production version: http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/ Here is the source code: https://github.com/Loratadin/weather-app 回答1: I was able to replicate your

问题 As noted in this answer it is possible to greatly simplify the amount of code needed to check for props in Styled-Components . For example, compare this code: ${props => Object.keys(props) .filter(key => colors[key]) .map(color => `color: ${colors[color]};`) .join(' ')} To this: ${props => props.white && `color: ${colors.white}`} ${props => props.light && `color: ${colors.light}`} ${props => props.grey && `color: ${colors.grey.base}`} ${props => props.dark && `color: ${colors.dark}`} ${props

问题 I am trying Styled-components in a simple React project, I have a theme object that is passed to the component so I can do: background-color: ${props => props.theme.primary}; I am also using Polished to modify the passed values, so a button uses a darker version of the color as an outline. I can do this with: border: 1px solid ${darken(0.05, '#00823b')}; But I need the color value to be from the theme, how do I go about passing the theme properties in? Thanks! 回答1: Define your border style

问题 I have this styled component: type Props = { iconAlign: string, }; const IconWrapper: ComponentType<Props> = styled.View` margin: 10px 10px 0px 10px; position: absolute; ${({ iconAlign }: Props) => iconAlign === 'left' ? 'left: -35px;' : 'right: -35px;'} `; And call it this way: <IconWrapper iconAlign="left"> but Flow gives me the following error: Cannot call styled.View because property iconAlign is missing in object type [1] in the first argument of array element. "flow-bin": "0.96.0",

问题 In the Contentful CMS, I have two different content-types: BigCaseStudy and BigCaseStudySection . To get this content to appear in my Gatsby 2.x site, my thinking was: Do query 1, which gets all the BigCaseStudy fields I want to display, and also contains the content's ID field as metadata. Take that ID from query 1, match to a Contentful reference field (which contains an ID ) in query 2 Do query 2, return all matching BigCaseStudySection fields The end goal would be to display the original

问题 I'm using Material UI components and MaterialTable and I want to stylish the components using StyledComponents But I not been having the desired results when I try to apply styles using StyledComponents CodeSandBox Online Example Example: import styled from 'styled-components' import MaterialTable from "material-table"; export const MaterialTableStyled = styled(MaterialTable)` /* STYLE FOR FILTER ROW */ tbody > .MuiTableRow-root:first-child { background-color: #F1F3F4 !important; } ` When I

问题 When it comes to checking for props in Styled Components, it seems to me that things could be a great deal DRYer. For instance, let's take a look at the following code: ${props => props.white && `color: ${colors.white}`} ${props => props.light && `color: ${colors.light}`} ${props => props.grey && `color: ${colors.grey.base}`} ${props => props.dark && `color: ${colors.dark}`} ${props => props.black && `color: ${colors.black}`} ${props => props.info && `color: ${colors.info}`} ${props => props

问题 I'm working with a DatePicker element in Antd and I'm trying to only show the calendar body. I've tried using styled components to directly target the header and footer of the calendar and set display: none; properties on both, but so far no dice. Antd Library import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { DatePicker } from "antd"; import styled from "styled-components"; function onChange(value, dateString) { console

问题 I'm trying to style a react-router-dom NavLink navbar. I've gone about it a few different ways, but in every instance whatever way I will choose will make the NavLink 'unclickable' - it will be a nicely styled box that will not navigate on a click. Here are a couple ways I've gone about it: One way I've tried is making glamorous css boxes with clicked tests. This is the preferred method that I want to work, because it will allow me to style hover and other pseudo-elements. I tried the