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} />;
}
}
Related
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;
import React, from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
const StyledLink = styled(Link)`
text-decoration: none;
cursor: pointer;
color: black;
font-size: 14px;
line-height: 22px;
font-weight: 60";
color: #393e46;
letter-spacing: .01em;
`;
const App = () => {
return <StyledLink>some text</StyledLink>
}
export default App;
I'm trying to style the Link component from react-router-dom with Styled components syntax, but it breaks my whole app and it does not work as intented.
Inside the Link component, there is an a tag, you need to style her:
styled(Link)`
a {
your style here
}
`
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'm trying to remove underline for my Link in react by using styled-components
if I use style={{textDecoration: "none"}} it will work but when I use text-decoration: none; in my styled components it won't work:
here is my js code:
import React from "react";
import styled from "styled-components";
import { Link } from "#reach/router";
import { CSSTransition, TransitionGroup } from "react-transition-group";
const StyleNavbarContainer = styled.nav`
background-color: #333333;
width: 100%;
color: #d6d6d6;
position: fixed;
text-align: center;
top: 0;
`;
const AppleLogo = styled.div`
font-size: 20px;
display: inline-block;
`;
const StyleLinkList = styled.ul`
display: inline-block;
`;
const StyledLink = styled(Link)`
padding: 12px 10px;
color: #d6d6d6;
text-decoration: none;
`;
const Navbar = (props) => {
return (
<>
<StyleNavbarContainer>
<AppleLogo>
<i class="fab fa-apple"></i>
</AppleLogo>
<StyleLinkList>
<StyledLink to="/">Mac</StyledLink>
</StyleLinkList>
</StyleNavbarContainer>
</>
);
};
export default Navbar;
add my App.jsx file here is the code:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
export default App;
Need to remove import "bootstrap/dist/css/bootstrap.min.css"; from App.jsx
Like the title says, this works with styled components sitting within the same js file (provided they are procedural-ordered above). But with imported child components I can't get it to work.
import React from "react";
import styled from "styled-components";
// Components
import Bars from "../path/Bars.js";
import BarsHover from "../path/BarsHover.js";
// Variables
import { colors } from "../../path/index.js";
//============================================ styles =============================================
const DivBars = styled(Bars)``;
const DivBarsHover = styled(BarsHover)``;
const DivWrapper = styled.div`
display: flex;
width: 20rem;
margin-bottom: 3rem;
&:hover {
cursor: pointer;
}
&:hover ${DivBars} {
display: none;
}
&:hover ${DivBarsHover} {
display: block;
}
`;
//=========================================== component ===========================================
const ParentComponent = props => {
return (
<DivContainer>
<DivBars fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.niagara} />
<DivBarsHover fullBarWidth={"100%"} fractionBarWidth={"70%"} barColor={colors.gallery2} />
</DivContainer>
);
};
export default ParentComponent;
I think this caveat is the cause:
...wrapping A in a styled() factory makes it eligible for
interpolation -- just make sure the wrapped component passes along
className.
class A extends React.Component {
render() {
return <div className={this.props.className} />
}
}
const StyledA = styled(A)``
const B = styled.div`
${StyledA} {
}
`
NOTE: Ensure the className prop is propagated all the way to the component being referenced in the case that it isn't a direct descendent.