When I am trying to use font-weight and font-family when creating a styled component, nothing happens. Is there some specific way to set font-weight and font-family, when using styled components?
Any help is appreciated. Thanks in advance.
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 700;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
What you have works perfectly fine.
Complete example
import React, { Component } from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
const fontsize = {
H3FONTSIZE: '400px',
}
export const H3 = styled.h3`
font-size: ${fontsize.H3FONTSIZE};
font-weight: 10000;
font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;
class App extends Component {
render() {
return (<H3>Hello</H3>)
}
}
render(
<App />,
document.getElementById('root')
)
Demo: https://stackblitz.com/edit/styled-components-rbd4xo?file=index.js
Related
import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;
import { Container } from "./components/styles/Container.styled";
import Header from "./components/Header";
import GlobalStyles from "./components/styles/Global";
function App()
{
return (
<>
<GlobalStyles />
<Header />
<Container>
<h1>Hello World</h1>
</Container>
</>)
}
export default App;
I am trying to use GlobalStyles from 'styled-components' and want to change something within it. However, I took this kind of error: I am taking this error when I am trying to use GlobalStyles ERROR in src/components/styles/Global.js
Line 4:6: Parsing error: Identifier 'GlobalStyles' has already been declared. (4:6).
Does anyone know the answer?
I think the problem is from this
import { createGlobalStyle } from "styled-components";
import { GlobalStyles } from "styled-components";
you only need to import createGlobalStyle instead of both
import { createGlobalStyle } from "styled-components";
By the way, GlobalStyles is not existing in styled-components. I think it's invalid to import. The document for reference
The full fix can be
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
},
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
},
p {
opacity: 0.6;
line-height: 1.5;
},
image {
max-width: 100%;
},
`;
export default GlobalStyles;
You are declaring twice GlobalStyles, one when you import it and another as a const variable. You have to delete the second line with the import and also delete the comas at the end of every selector on the styled component.
here is your code fixed:
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet');
* {
box-sizing: border-box;
}
body {
background: #fff;
color: pink;
font-family: "Courgette", sans-serif;
font-size: 1.15em;
margin: 0;
}
p {
opacity: 0.6;
line-height: 1.5;
}
image {
max-width: 100%;
}
`;
export default GlobalStyles;
I've developing react typescript project and trying to load custom font.
But I can see font is loaded in Network tab but font is still not changed to what I want.
I tried many related post in StackOverflow but still the same.
The last I did is this link.
Here's my current code I added for font.
assets/fonts/globalfonts.ts
import { url } from 'inspector';
import {createGlobalStyle} from 'styled-components';
export const GlobalFonts = createGlobalStyle`
#font-face {
font-family: 'Trixie Plain';
font-style: normal;
font-weight: 400;
src: url("./assets/fonts/Trixie-Plain.otf") format('opentype')
}
`
src/components/TopBar/components/Nav.tsx
import React from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { GlobalFonts } from '../../../assets/fonts/globalfonts'
const Nav: React.FC = () => {
return (
<StyledNav>
<GlobalFonts />
<StyledLink exact activeClassName="active" to="/">
Home
</StyledLink>
</StyledNav>
)
}
const StyledNav = styled.nav`
align-items: center;
display: flex;
font-family: 'Trixie Plain';
`
[
You need to define a declaration file d.ts as mentioned in the
https://dev.to/anteronunes/comment/171a3
Can you try altering the globals font face as below?
export const GlobalFonts = createGlobalStyle`
#font-face {
font-family: TrixiePlain;
// rest of declaration
}
`
Note above the font-family value without space/quotes. Thus, in styled components:
const StyledNav = styled.nav`
align-items: center;
display: flex;
font-family: TrixiePlain;
`
Did you tried by creating rules in the webpack?
module.exports = {
module: {
rules: [
{
test: /\.(woff2|woff|eot|ttf|otf)$/,
use: ["file-loader"],
},
],
},
}
Check if you installed the file-loader.
npm i -D file-loader
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