I'm trying to use styled components to personalize a header component from semantic-ui-react.
I try:
header.jsx:
import React from 'react';
import { Header } from 'semantic-ui-react';
import TipografiaHeader from './cabecalho.css'
const HeaderPages = () => (
<div>
<TipografiaHeader as='h2'
textAlign='center'
>
Workout Log
</TipografiaHeader>
</div>
)
export default HeaderPages
cabecalho.jss.js:
import styled from "styled-components";
import { Header } from 'semantic-ui-react';
const TipografiaHeader = styled.Header`
background: red;
`;
export { TipografiaHeader };
But in the console i'm receiving:
Uncaught TypeError: _styledComponents2.default.Header is not a
function
The syntax for styled.element can only be used for HTML elements. For eg:
styled.h1``
For styling a custom component, the syntax to be used is:
styled(Header)``
Note that this custom component requires the className prop to be passed into the DOM element underneath for this to work.
Docs
Related
I am making a site with next.js and #emotion/styled.
I have a card component as below.
import React from 'react';
import styled from '#emotion/styled';
const Card: React.FC = (props) => {
return (
<Container>{props.children}</Container>
);
};
export default Card;
const Container = styled.div`
padding:36px;
`
and I want to override the style and add a border to it.
import Card from '#/components/atoms/products/Card'
import styled from '#emotion/styled';
const Test: React.FC = () =>{
return(<BorderedCard/>)
}
export default Test
const BorderedCard = styled(Card)`
height:300px:
border: solid 1px #244C95;
`
I import the card component and override it. I expected the card component to have a border, but the style did not apply for the component. This method works everywhere else in the project, but not for this component.
I suspected that somehow this component cannot be found, and checked the ts config file.
"include": [
"next-env.d.ts",
"src/**/*",
"emotion.d.ts"
],
Then I tried to change the directories of the files, but no change.
Anyone know why this overriding style is not working?
Any help would be appreciated.
Your Card component needs to have a className prop and pass it to your Container component. It's a requirement for emotion styled function to work: https://emotion.sh/docs/styled#styling-any-component.
const Card: React.FC = (props) => {
return (
<Container className={props.className}>{props.children}</Container>
);
};
I'm trying to use Container component with styled-components using ContainerProps but then I can't pass component prop which belongs to OverridableComponent interface.
Code below gives me error which tells me that I can't pass component property. When I change <Container/> to <MuiContainer/> it works.
MuiContainer has type OverridableComponent<ContainerTypeMap<{}, 'div'>> but I can't import OverridableComponent from #material-ui/core
How can I make passing component property possible?
import { Container as MuiContainer, ContainerProps } from '#material-ui/core';
import React from 'react';
import styled from 'styled-components';
const Container = styled(MuiContainer)<ContainerProps>``;
export const Test = () => {
return (
<>
<Container maxWidth="lg" component="main">
content
</Container>
</>
);
};
Usage of component prop
const Container = styled(MuiContainer)<ContainerProps<'main', { component: 'main' }>>``;
You can tell the Typescript compiler to retain the original Container prop types by asserting it:
import MuiContainer from "#mui/material/Container";
import { styled } from "#mui/material/styles";
const Container = styled(MuiContainer)`
background-color: pink;
padding: 16px;
` as typeof MuiContainer;
export default function StyledComponents() {
return (
<Container maxWidth="lg" component="main">
content
</Container>
);
}
Live Demo
Reference
https://mui.com/guides/composition/#with-typescript
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
I'm using styled Component on a page of my app. Code is really straightforward:
// styled component
import styled from 'styled-components'
const StyledOrdersPage = styled.div`
background-color: red;
`
export default StyledOrdersPage
and here is the component:
import React, { Component } from 'react';
import StyledOrdersPage from './index.styled.js'
class OrdersPage extends Component {
render() {
return (
<StyledOrdersPage>
<p>Simple component</p>
</StyledOrdersPage>
);
}
}
export default OrdersPage;
Problem is, I have absolutely no styling on my page whatsoever.
Now, this page can be accessed by using the /order route of my app. If I navigate to homepage (/), and then to my order page, styling is applied. But if I reload the order page, all styling is gone.
Is this related to styled-components ? Or is this just some weird routing behavior ?
I tried to override style of component created by standard way of styled-components(styled.) and both the ways(styled() and style.extends) worked for me.
But when I am trying to override style of simple react component with styled() approach, its rendering the component but not overriding it's style.
Below is snippet of code
import React, { Component } from "react";
import styled from "styled-components";
export default class MyLabel extends Component {
render() {
return <label>{this.props.children}</label>;
}
}
const StyledMyLabel = styled(MyLabel)`
color: green;
`;
And for display purpose I am using following syntax
<StyledMyLabel>My Styled Label</StyledMyLabel>
Please refer the link on codesandbox which might be useful
You have to pass className to desirable styling element manually to make it works.
import React, { Component } from "react";
import styled from "styled-components";
export default class MyLabel extends Component {
render() {
return <label className={this.props.className}>{this.props.children}</label>;
}
}
const StyledMyLabel = styled(MyLabel)`
color: green;
`;
NOTE:
Consider carefully whether to wrap your own components in a styled component, when it isn't necessary. You will disable the automatic whitelisting of props, and reverse the recommended order of styled components and structural components.
See more info here.
<label style={{color: "green"}}>{this.props.children}</label>
or
const style = {color : "green"};
<label style={style}>{this.props.children}</label>