I'm new to react and I have a quick question about styling imported components. I made a basic Title component that simply outputs the props passed. My Title.js file:
import React from 'react';
import '../App.css'
class Title extends React.Component{
render(){
return <h1>{this.props.prop}</h1>
}
}
export default Title
I'm using it in my App.js file and trying to style it via a className
import React from 'react';
import Title from './components/Title'
import './App.css';
function App() {
return (
<Title className = 'title' prop = 'Title!'/>
);
}
export default App;
my css:
.title{
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
margin-top: 100px;
padding: 20px;
border: solid black;
}
This does not works, even if I apply an inline style to the Title tag. However it does works when I apply the className to the h1 tag within the Title.js file. Is it because everything written within the Title tag is just passed as a prop? If that's true how are third-party library components styled? Any help is much appreciated!
In order for this to work the way you want to, you need to pass the className prop form your Title component to the h1 inside it:
class Title extends React.Component{
render(){
return <h1 className={this.props.className}>{this.props.prop}</h1>
}
}
Related
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",
})
);
I am working on project in which I have to use Material UI, just for simplicity, consider I am having a simple functional component in which I am having 2 Material UI components Button and Text Field
import React from 'react';
import { Button, TextField } from '#material-ui/core';
function RenderComponent(){
return(
<>
<Button variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
Can anyone please tell me how to override the css properties of these 2 Material UI components.
Thankyou 🙏
There are several ways to do this, you can directly override the built-in CSS class of an MUI component using the class name in your imported CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to .MuiButton-root class on your "CSS" file. Like bellow.
.MuiButton-root{
color: white;
height: 20px;
padding: 10px;
}
You can also use the available props of a component, you can easily find them in their individual documentation page of mui site.
Again you can use makeStyles or styled to style your component.
Here is an example to use makeStyles in your Button component.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Button, TextField } from '#material-ui/core';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
function RenderComponent(){
const classes = useStyles();
return(
<>
<Button className={classes.root} variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
You can find more about styles here.
Give them id's/classes and write your custom CSS for them. If it doesn't override the standard Material-UI styles, add the keyword !important. If you are using create-react-app, you can import CSS right to the file like this:
import "./styles.css";
If this doesn't help, that means Material-UI uses inline styles for the elements. In this case, you would have to write your CSS right into your components' attributes: like this. If it doesn't override standard styles, use !important again.
In my react component, I have imported CSS file from the CSS directory, but the CSS isn't being applied to the component.
This is my folder structure
This is my code on the homepage.jsx file
import React from 'react';
import './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
And this is the CSS file
.homepage-container {
background: red;
height: 100vh;
}
When I put the same CSS in the index.css file which is automatically created by the create-react-app, then the styling is visible.
What is the problem here? Am I missing something?
As far as I know you have to import styles to specific files in this way:
import React from 'react';
import styles from './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className={`${styles[homepage-container]}`}>
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
Notice that the [] brackets are only for multi-word scss classes. If your class would be just named homepage, then the proper way would be className={`${styles.homepage}`}
I don't see any problem in your code whatever you have posted.
for your reference
JSX
import React from "react";
import "./homepage-styles.scss";
export default function App() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
);
}
sass
.homepage-container {
background: red;
height: 100vh;
}
Live Demo
Make sure you have installed node-sass package.
My REACT component's code is like this
import React from 'react';
import { Twemoji } from 'react-emoji-render';
import emoji.css;
const emoji = () => {
return ( <Twemoji className="Twemoji" text=":+1:"/> );
}
export default emoji;
My css file (emoji.css) has the following code
.Twemoji {
width: 20em;
height: 20em;
}
but the size of the emoji doesn't change.
if I inspect the element and modify the inline style in the page html that works
Please can you help me understand how I can increase the emoji size via CSS
Twemoji Component does not take a prop className (see here), instead you will have to use the options prop in order to pass a custom css classname
const options = { className: "Twemoji" };
const emoji = () => {
return ( <Twemoji text=":+1:" options={options} /> );
}
EDIT:
you would also have to add !important to width and height in the css class to take precedence over the element style (see css precedence)
.Twemoji {
width: 4em !important;
height: 4em !important;
}
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.