The problem is that I have one DefaultButton and I code custom styled components for it. I have a different button called PrimaryButton and I want to write style properties to it. But he doesn't see it.
This is folder structure
DefaultButton.tsx
import * as S from "./styles";
const DefaultButton = ({ children }: any) => {
return <S.Button>{children}</S.Button>;
};
export default DefaultButton;
PrimaryButton.tsx
import styled from "styled-components";
import { colors } from "theme";
import DefaultButton from "./DefaultButton";
const PrimaryButton = styled(DefaultButton)`
background-color: ${colors.mainColors.blueOcean};
`;
export default PrimaryButton;
index.tsx Page
import { PrimaryButton } from "components";
import type { NextPage } from "next";
import Head from "next/head";
const Home: NextPage = () => {
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>hessssllo</h1>
<PrimaryButton>Sıgn in</PrimaryButton>
</div>
);
};
export default Home;
styles.tsx
import styled from "styled-components";
export const Button = styled.button`
font-family: "DM Sans", sans-serif;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
`;
Components index.ts for importing
export { default as Button } from "./Buttons/DefaultButton";
export { default as PrimaryButton } from "./Buttons/PrimaryButton";
You are trying to set DefaultButton into PrimaryButton, it looks like <button><button>text</button></button>, hence you cannot see the styled button. So, all you have to do, just get the styled button from the styled.ts.
PrimaryButton.tsx
import styled from "styled-components";
import { Button } from "./styles";
const PrimaryButton = styled(Button)`
background-color: blue;
color: white;
`;
export default PrimaryButton;
Related
I'm trying to add style to a component.
It works fine with a component imported from the material-ui library, but it doesn't work when it comes to my original component(that is not used in any library).
Here is the code for style with styled-component
import styled from "styled-components";
import List from "./List";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled(List)` // doesn't apply style
margin: 100px;
color: pink;
`;
export const Container = styled.div` // applies style
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)` // applies style
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
App.js
import { ListCotainer, Container, Icon } from "./styles";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ListCotainer />
<Icon />
</Container>
);
}
List.js (regular component with no library)
import React from "react";
const List = () => {
return (
<div>
<h1>Hello styled component</h1>
</div>
);
};
export default List;
Is there any way I can add style to the List component?
you need to create styled CSS same as you have created for Container in your App.js. i have update your code it should work for you.
styles.js
import styled from "styled-components";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled.div`
margin: 100px;
width: 200px;
color: pink;
`;
export const Container = styled.div`
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)`
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
List.js
import React from "react";
import { ListCotainer } from "./styles";
const List = () => {
return (
<ListCotainer>
<h1>Hello styled component</h1>
</ListCotainer>
);
};
export default List;
App.js
import { Container, Icon } from "./styles";
import List from "./List";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<List />
<Icon />
</Container>
);
You may not be able to style like this component and what you are applying to the style material component is a svg/icon that you can apply to icons and img with style components.
style.js
import styled from "styled-components";
import AcUnitIcon from "#mui/icons-material/AcUnit";
export const ListCotainer = styled.div`
margin: 100px;
width: 200px;
color: pink;
`;
export const Container = styled.div`
font-family: sans-serif;
text-align: center;
background-color: red;
`;
export const Icon = styled(AcUnitIcon)`
background-color: blue;
margin: 100px;
padding: 20px;
${Container}:hover & {
background-color: green;
}
`;
App.js
import { Container, Icon } from "./styles";
import List from "./List";
export default function App() {
return (
<Container>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<List />
<Icon />
</Container>
);
}
List.js
import React from "react";
import { ListCotainer } from "./styles";
const List = () => {
return (
<ListCotainer>
<h1>Hello styled component</h1>
</ListCotainer>
);
};
export default List;
I have been trying to change the styling from bulma to Styled components on my react application but I am facing some issues while trying to implement it inside my function.
import React, {FC} from 'react';
import styled from 'styled-components';
const theme = styled.div`
text-align: center;
background-color: #535151;
font-style: bold;
`;
const H1 = styled.h1`
font-size: 60pt;
font-style: Verdana;
color: black;
`;
interface HeaderProps {
title: string;
subtitle: string;
}
const Header: FC<HeaderProps> = ({title, subtitle}) =>{
return (
<>
<theme>
<H1 className="title mb-3">{title}</H1>
<h2 className="subtitles mt-0">{subtitle}</h2>
</theme>
</>
);
}
export default Header;
import React from 'react';
import styled from 'styled-components';
const Template = styled.a`
background-color: red;
`;
export const Test = () => {
return(
<>
<Template>Hello</Template>
</>
)
}
Try this.
I need to create 2 similar styled components, which will share their styling but use different HTML element.
There is a way to do in runtime with "as" property (), but I have a specific exports which I need to use the default but I need for it to be in a way without using it so the Link styled component be a "styled.a" and StyledLink component to be "styled.span", I tried to do something like:
export const StyledLink = styled.span(`
color: ${props => props.theme.colors.mainLinkColor};;
text-decoration: underline;
&:hover {
color: ${props => props.theme.colors.textAccent};
text-decoration: underline;
}
`);
export const Link = <StyledLink as={RRLink} />;
That is obviously not working... So is there a way for a Link to mimic StyledLink styles but use an "a" tag instead of "span"?
Simply import and use css from styled-components like so:
import React from "react";
import ReactDOM from "react-dom";
import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: gold;
`;
const Div = styled.div`
${sharedStyles}
`;
const Button = styled.button`
${sharedStyles}
`;
const App = () => (
<>
<Div>Hello Div</Div>
<Button>Hello Button</Button>
</>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I'm using styled-components in ReactJS and I'm trying to create a component that can take in the background-image as a prop. After some research, I've tried this:
import SpeechBubble1 from '../images/home_images/Speech 1.png';
...
const SpeechBubble = styled.div`
background-image: url(${props => props.background});
`;
...
<SpeechBubble background={SpeechBubble1} />
But it doesn't work. Checking in the browser element window, I can see I'm getting an Invalid property value for background-image.
What am I doing wrong?
Edit:
I also tried doing this, which hasn't worked:
<SpeechBubble style={{background: `url(${SpeechBubble1})`}} />
Make sure you are including a height for the styled component, otherwise, it won't display anything (unless it has children that define its dimensions).
Working example:
components/Container
import styled from "styled-components";
const Container = styled.div`
height: 100vh;
background-image: url(${({ background }) => background});
background-repeat: no-repeat;
background-size: cover;
`;
export default Container;
index.js
import React, { Fragment } from "react";
import { render } from "react-dom";
import reactbg from "./images/reactbg.png";
import Container from "./components/Container";
import GlobalStyles from "./components/GlobalStyles";
import Title from "./components/Title";
const App = () => (
<Fragment>
<GlobalStyles />
<Container background={reactbg}>
<Title>Hello World</Title>
</Container>
</Fragment>
);
render(<App />, document.getElementById("root"));
Index.js
import React from 'react'
import {ProfilePic} from './NavigationElements'
import profileimg from '../../images/profileimg.jpg'
const Navigation = () => {
return (
<NavigationWrapper>
<ProfilePic src={profileimg} alt="" />
</NavigationWrapper>
)
}
export default Navigation
NavigationElements.js
import styled from "styled-components";
export const NavigationWrapper = styled.div`
color: #fff;
`
export const ProfilePic = styled.img`
width: 5vh;
height: 3vh;
margin: 55px;
`
You can use inline styling:
<SpeechBubble style={{background: `url(${SpeechBubble1})`}} />
I am not able to import style
import styles from "./Login.css";
This is Login.css
.loginContainer {
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
background-color: red;
}
This is This is Login.js
import React, { Component } from "react";
import { connect } from "react-redux";
import styles from "./Login.css";
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
return <div className={styles.loginContainer} />;
}
}