I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
Related
I am learning react.
I am creating a custom button element and my Css is not being applied to the button element. What am I doing wrong?
Header.JS
import React from "react";
import Button from "../UI/Button"
import classes from "./Header.css"
const Header = () => {
const loginHandler = () => {};
return <React.Fragment>
<div className="headerdiv">
<Button className="headerButton" clickHandler={loginHandler} label=
{"Login/Logout"}></Button>
</div>
</React.Fragment>
};
export default Header;
Button.js
import React from "react";
const Button = (prop) => {
return (
<button onClick={prop.clickHandler}>{prop.label}</button>
);
};
export default Button;
Header.css
.headerButton {
background-color: rgb(179, 44, 44);
color: rgb(238, 64, 64);
}
.headerdiv {
background-color: yellow;}
Your import is wrong and you are applying the classname to the component "Button" not the "button"
Change
//remove import from Header.js
import classes from "./Header.css"
//also remove classname
<Button clickHandler={loginHandler} label=
{"Login/Logout"}></Button>
//Add to button.js
import "./Header.css"
//Add the className to your button
<button className="headerButton" onClick={prop.clickHandler}>{prop.label}</button>
Should work now :)
For example I want to add flex my h1 with class pageTitle
import AppBar from '#material-ui/core/AppBar';
const styles = require('./Header.module.css');
<div className={styles.header}>
<AppBar>
<Typography>
<h1 className={styles.pageTitle}>HELLO</h1>
</Typography>
</AppBar>
</div>
In my Header.module.css file
.pageTitle {
display: flex;
border-top: 10px;
}
Is this possible to do? Because its not changing anything on my end, again using Typescript, but following the same process as the docs that Material UI shows for css modules
Probably material-ui selectors are "stronger".
Material-ui supply several ways to override their styles.
For example, use classes. In your case:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from '#material-ui/core/styles';
import AppBar from "#material-ui/core/AppBar";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles({
root: {
display: 'flex',
borderTop: '10px solid orange'
}
});
function App() {
const classes = useStyles();
return (
<AppBar classes={classes}>
<Typography>
<h1>HELLO</h1>
</Typography>
</AppBar>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
https://codesandbox.io/s/material-ui-override-styles-classes-v8nhl
BTW, <AppBar /> already has display: flex and you set borderTop in a css file which is invalid (it should be border-top) so maybe if it was valid, it was working.
I am a bit puzzled when following the documentation here. Everything seems to work other than the headerStyle attribute. It doesn't seem to be applying to styles that I apply to it. I'm not sure where I am going wrong.
Checking CodeSandbox from one of the examples provided headerStyle works. Where else can I check to understand what is causing this issue?
Localhost:
Codesandbox:
Not sure where your problem lies, as I'm not getting the same warning (when using headerStyle), but here's a working example -- make sure to import the ant design css, otherwise, the ant components won't work as intended. Also, I find it easier and cleaner to override ant's css via overriding their respective class names in a separate css file, rather than overriding styles -- especially when overriding more than css property.
index.js
import React, { Component } from "react";
import { render } from "react-dom";
import { Drawer, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";
class App extends Component {
state = { visible: false };
showDrawer = () => {
this.setState(prevState => ({
visible: !prevState.visible
}));
};
render() {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.showDrawer}
visible={this.state.visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
);
}
}
render(<App />, document.getElementById("container"));
index.css
.ant-drawer-header {
background-color: #5340ff;
border-radius: 0;
}
.ant-drawer-title {
color: #fff;
}
.ant-drawer-body {
background-color: #5340ff;
color: #fff;
height: calc(100vh - 55px);
}
I'm trying to extend styles for a react component using styled-components but is not working.
AFAIK, I'm doing it the right way, but perhaps I'm missing something...
Here is what I have:
import React from "react";
import styled from "styled-components";
const TextContainer = ({ text }) => {
return <p dangerouslySetInnerHTML={{ __html: text }} />;
};
const Paragraph = styled(TextContainer)`
background: red;
`;
class Home extends React.Component {
render() {
const { t } = this.props;
return <Paragraph text="This is a test" />;
}
}
export default Home;
Of course, the expected result is to have a red background on p, but right now the output looks like this:
Any idea on how to solve this? Probably I'm missing something, but I can't realize what.
Thanks is advance!
As stated in documentation:
The styled method works perfectly on all of your own or any
third-party components, as long as they attach the passed className
prop to a DOM element.
Example
// This could be react-router-dom's Link for example, or any custom component
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
`;
render(
<div>
<Link>Unstyled, boring Link</Link>
<br />
<StyledLink>Styled, exciting Link</StyledLink>
</div>
);
Ref: https://www.styled-components.com/docs/basics#styling-any-component
I didn't know that was a way to do it.
I would do:
const Link = styled.a`
..put you css styles here (className styles)
`
const StyledLink = styled(Link) `
color: palevioletred;
font-weight: bold;
`
render(){
return(
<div>
<Link>Unstyled, boring Link</Link>
<br />
<StyledLink>Styled, exciting Link</StyledLink>
</div>
)
}
I can't seem to style a PrimeReact component with styled-component.
Given the below code to render an InputText, my intention is to change the width of it. But it doesn't work.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText/>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
styled-components generates a className that should be passed to the component.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText className={this.props.className} /> <---- here
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
If InputText doesn't accept className, you can simply wrap it with another component:
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<div className={this.props.className}> <---- here
<InputText />
</div>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
PrimeReact has a lot of styles applied with a separate sass stylesheet, often combining multiple classnames and html tags.
To get your styles to win, you need more CSS specificity.
A solution is to use a nested selector, like:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
This will generate 3 identical classnames and is recommended by the Styled Components docs. More classname specificity needed? Use more &s.
Or you could put in a !important. I've seen this around.
Or edit their sass file.