I'm trying to add a CSS file for a specific component in react, but the CSS file apply in all component
How can I add style.css for a specific component?
import React, { Component } from "react";
import { Link } from "gatsby";
import Layout from "../components/layout"
import Footer from "../components/Globals/Footer"
import "./crm2.css"
class Crm extends Component {
render() {
...
}
}
You can refer to this link on which the narrator is explaining the options you have for styling the React Components. Styling in React
Your options are
In-Line styling
Using variables
styling by means of a function or method inside the component
Once you take a look at the video link, you will know what approach suits you the best.
Your CSS className must be unique. If you write CSS for this class then it will be applied to the specified component.
There are two components in React
Built-in component (like <p>, <div>, <span>, etc)
React component (like <App/>,<Product>, etc)
React components allows you to break up the UI into different pieces so that it can then be reused and handled individually. It is the Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter.
These components can be styled if you provide a unique className to those components and you write a CSS style for that.
You might have styled the built-in component as shown below
style.css file:
p {
font-size:14px;
color: red;
}
Using the above approach, the CSS would be applied to all the <p> component in all the JSX file.
If you have wanted to style the React component then you need to select those components and styled it as shown below.
<Product className = "items" />
CSS would be
.items {
color: red;
...
}
Related
I have been working with react using css modules till now. I wanted to switch to styled components and there is one thing that confuses me. When working with css modules i have been creating many UI components as wrappers, passing props.children in between and then styling the wrapper in specific ".module.css" file. Now when i saw how styled components work, its like creating a component and styling that one element or even styling nested jsx tags. So styled components have wrapper behaviour. Does it kinda replace usage of props.children?
No, Styled Components do not force you not to use props.children.
You can use a Styled Component as a wrapper and style children inside of it as you would do with a Component styled with a css.module:
I guess you are composing your React components like this:
// css.module
// styles.module.css
.container {
background-color: red;
}
.container > h2 {
color: green;
}
// Your React Component Wrapper:
const Wrapper = ({children}) => <div className={styles.container}>{children}</div>
// And you use it like this:
<Wrapper><h2>This text is green on a red background</h2></Wrapper>
You can do the same thing with Styled Components:
const Wrapper = ({ children }) => <StyledWrapper>{children}</StyledWrapper>;
const StyledWrapper = styled.div`
background-color: red;
& > h2 {
color: green;
}
`;
// And you use it like this:
<Wrapper><h2>This text is green on a red background</h2></Wrapper>
The result is the same and even the usage is the same, styled-components do not force you to use a certain React Composition Pattern, it's up to you whether to style container and then select children inside of it, or if to individually style all the children.
They just give you some super-powers, for example you can target a Styled Component Child inside a Styled Component Parent, by simply calling the Component name, or you have the chance to use JS variables more easily into your css code, since all props passed to a Styled Component can be retrieved by the css.
DEMO
I am new to React, I have some confusion related to CSS styling related to rwmc components.
I am just rendering two Button components on web page by importing it from '#rmwc/button' package. I am following this tutorial
https://jamesmfriedman.github.io/rmwc/buttons
I have also imported material design for this component like
import '#material/button/dist/mdc.button.css';
Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.
I am asking this because I have read here that
https://jamesmfriedman.github.io/rmwc/styling-theming
All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.
Any help will be appreciated.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
import { DrawerHeader } from '#rmwc/drawer';
import { Button, ButtonIcon } from '#rmwc/button';
import '#material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'
const MyComponent = props => (
<div>
<Button>Default</Button>
<Button className="myDrawerHeader">Default2</Button>
</div>
);
ReactDOM.render(<MyComponent />, document.getElementById('root'));
index.css
.myDrawerHeader {
color: red !important;
}
Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.
screen-output-now
I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.
It behaves underneath as,
<button className="material-components-web">Default</button>
<button className="material-components-web myDrawerHeader">Default2</button>
I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props,
https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js
/** Additional className for the button */
className?: string
So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.
I have a component in react, a custom grid that I want to use twice in the same page but with different background images, I would like to pass this images with props form the root component, what is the right way to do it?
and it is a good idea to do this at all?
this code I wrote is working but i'm not sure is the right thing to do
`import React, { Component } from 'react';
import InnerTextGridCategory from './InnerTextGridCategory';
import InnerTextGridTitle from './InnerTextGridTitle';
import PlayLink from './PlayLink';
class CustomGrid extends Component {
render() {
const styles = {
img1: {
background: `linear-gradient(61deg, #000000 0%, rgba(0, 0,
0, 0) 70%),url(${this.props.img1})`,
backgroundSize: `cover`,
backgroundPosition: `center`,
}
};
return (
<div className={`${this.props.gridSize}`}>
<div className={`${this.props.gridSize} item1`} style=
{styles.img1}>
<div className="wrapper-text-grid">`
If can't hardcode these image URLs in CSS but you a going to get them from props I don't see a better way to do it.
Here what React docs say:
Some examples in the documentation use style for convenience, but using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. style is most often used in React applications to add dynamically-computed styles at render time.
https://reactjs.org/docs/faq-styling.html#can-i-use-inline-styles
BTW, you can set all the static props in CSS and leave just image to inline styles
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>
With the arrival of Material-UI#next comes the replacement of LESS-based styling with CSS-to-JS-based styling. However, the component demos on Material-UI's website appear to ignore the creation of props-based-styling. I'm trying to create divs containing various Material-UI components at specific absolute heights on my page, however, the requirement of the stylesheet being predefined outside of the class means that the properties within the stylesheet can't be based on props passed to the component. Am I missing something?
For example:
import React, {Component} from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import Button from 'material-ui/Button';
const styleSheet = createStyleSheet({
container: {
position: "absolute",
top: /*How can this be dependent upon the props passed to the component?*/,
height: /*How can this be dependent upon the props passed to the component?*/,
}
});
class Foo extends Component {
render() {
let classes = this.props.classes;
return (
<div className={classes.container}>
<Button raised/>
</div>
);
}
}
export default withStyles(styleSheet)(Foo);
The example component displayed above can't have props-dependent styles, because props is not defined when the stylesheet is created. So how do I solve this problem? IS there a solution?
I would strongly advise you check out Styled Compoments. They make styling very simple and even allow you to pass third party components (in your case Material UI components). They also allow you to pass in props like the following:
const Stylesheet = styled.div`
color: ${props => props.primary ? 'white' :
`
<Stylesheet primary>My Div</Stylesheet>
Check out the docs for more details, that was a very simple example, but they are super easy to work with and you can accomplish exactly what you need with them.