I'm using styled components.
component_name.js
// import statement
import MyArrow from '../../path/to/img.svg"; // <- svg file
// inside return statement
<Arrow src={MyArrow} />
styled.js
export const Arrow: Object = styled('img')`
top: 5px;
/* other styles ... */
`;
Image path is correct. But image is not showing up. HTML img is showing up in the DOM, but not include src attribute.
Edit
I've updated to the styled.js like below.
export const Arrow: Object = styled('img')`
position: absolute;
top: 6px;
right: 4px;
width: auto;
height: 500px;
background-image: url(${(props) => props.src});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
`;
Still not working. Got this error Cannot convert a Symbol value to a string.
Please try by adding the following properties
width: auto;
height: 500px;
background-image:
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Related
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I am new to styled-component and I am getting an error stating :
Property 'icon' does not exist on type 'ThemeProps'.
I want to give an icon in props. For one icon it works. I don't know how to do it so that I can change it many times.
export const GenericInput = styled.input`
background-color: #f4f4f4;
width: 220px;
height: 47px;
border: none;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
letter-spacing: 1px;
padding: 15px 30px;
-moz-outline-radius: 50px;
outline: none;
${(Icon) =>
Icon && css`
background-image: url(${({ icon }) => icon});
background-size: 20px;
background-position: 10px 50%;
background-repeat: no-repeat;
color: #c7c7c7;
`
}
::placeholder {
color: #c7c7c7;
}
`;
I am using styled-components as a design library, I created a div that will hold a background image with its properties, if I inject the image url from outside the styled components it doesnt take and and does some mistakes.
Ill copy some code:
image-div component as styled component:
const ImageDiv = styled.div`
height: 100%;
width: 100%;
float: left;
background-repeat: no-repeat;
background-position: left;
background-size: cover;
`
export default ImageDiv;
using the ImageDiv on a screen and passing it a background image doesnt take the background properties from above
<ImageDiv style={{ backgroundImage: `url(${signin})` }} src = {signin} alt="logo" />
I will like to be able to pass the url as a prop and inject it into the styled component from above
You could simply pass it as another prop, then use it inside styled component as background-image property.
<ImageDiv bg={signin} src={signin} alt="logo" />
const ImageDiv = styled.div`
background-image: url(${(props) => props.bg});
`;
Use destructuring props
const ImageDiv = styled.div`
height: 100%;
width: 100%;
float: left;
background-repeat: no-repeat;
background-position: left;
background-size: cover;
background-image: ${({url}) => `url(${url})`};
`
export default ImageDiv;
I want to display text over this background image using React.js. Not sure if I am missing code in my App.js file? or css file?
this is what I have in my App.js file so far:
import React from 'react';
import '../styles/App.css';
const App = () => {
return (
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>
);
}
this is in my css file:
#port {
background-image: url('../images/largebulb.jpg');
background-size: cover;
background-position: center center;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#name {
font-family: 'Cinzel', serif;
font-size: 45px;
display: flex;
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: -40;
}
You have a CSS issue, this isn't a node issue. I've attached some quick direction for thought.
#port {
z-index: -10;
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1568050231220-41aae5663af6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
background-size: cover;
background-position: center center;
position: relative;
}
#name {
position: absolute;
font-size: 45px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-family: 'Cinzel', serif;
white-space: nowrap;
}
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>
Take the following example:
import * as React from 'react';
import styled from 'styled-components';
const Ball = styled.div`
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
const SmallBall = styled(Ball)`
width: 50px;
height: 50px;
`;
export default () => (
<>
<Ball name="Ball"></Ball>
<SmallBall name="SmallBall"></SmallBall>
</>
)
Here's the markup that's being generated:
If I were to write out the CSS I'd expect to be generated, it'd probably look something like this:
.sc-cHGsZl {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
}
.sc-cHGsZl.bmZbgS {
width: 50px;
height: 50px;
}
Instead what's generated is:
and
How can I get styled-components to output more concise CSS where common properties are grouped and not unnecessarily repeated?
You can add classNames in styled-component.
import * as React from 'react';
import styled from 'styled-components';
const Ball = styled.div.attrs({ className: "ball" })`
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(peachpuff 0% 8%, rgb(243, 169, 105) 10% 55%, rgb(192, 125, 66) 57% 100%) no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
const SmallBall = styled(Ball).attrs({ className: "small-ball" })`
width: 50px;
height: 50px;
`;
export default () => (
<>
<Ball name="Ball"></Ball>
<SmallBall name="SmallBall"></SmallBall>
</>
)
I think a simpler approach would be to make a reusable and flexible component that you can change via passing in properties OR by using style overrides (also, it appears like this issue was reported back in 2018). While it doesn't solve the duplicate class issue, it at least mitigates it.
Working example:
components/Ball/index.js
import styled from "styled-components";
export default styled.div`
width: ${({ width }) => width || "100px"};
height: ${({ height }) => height || "100px"};
border: 1px solid black;
border-radius: 50%;
background: radial-gradient(
peachpuff 0% 8%,
rgb(243, 169, 105) 10% 55%,
rgb(192, 125, 66) 57% 100%
)
no-repeat;
background-size: 150% 150%;
background-position: center;
background-position-x: 87%;
background-position-y: 87%;
`;
index.js
import React from "react";
import { render } from "react-dom";
import { Ball, Container } from "./components";
const App = () => (
<Container>
<Ball height="50px" width="50px" />
<Ball />
<Ball style={{ height: 200, width: 200 }} />
</Container>
);
render(<App />, document.getElementById("root"));
Ball # 1
Ball # 2
Ball # 3