In the create react app documentation it says the App.css is imported in the App.js. Is there also a way to load the compiled css-file from a component?
// MyViewComponent
import styles from '../../App.css';
You can just import the css file like the below in your component
import './header.css';
Imagine your header.css file looks like
.header {
background-color: rgb(49, 118, 197);
height:100px;
border:10px solid red;
}
To use the style, you can use the class like ,
<div className="header">Hello World</div>
Hope this helps :)
For css files you can just import them like
import "../../App.css"
which will import all of the selectors & CSS rules within that file.
if you're trying to style individual elements within your component with something like:
<div style={myStyles.wrapper} />
then you'll need to export a JS object from a file
Ex:
export default {
wrapper: {
background: "red"
}
}
then you can import it and use it
import myStyles from "../myStyles.js"
<div style={myStyles.wrapper} />
Related
I'm trying to learn Gatsby and I'm stuck on using styles from SCSS after I import it on the Homepage.
Here is my Homepage (index.js) that is loading and using SCSS with React JSX.
import * as React from "react"
import styles from '../styles/home.module.scss'
const IndexPage = () => {
return (
<main className={styles.container}>
<h1 className={styles.title}>Helloworld</h1>
</main>
)
}
export default IndexPage
Those are the styles I'm currently trying to import.
.container{
background: purple;
}
.title{
font-size: 5em;
color: white;
}
I'm using SCSS that came automatically installed from Gatbsy, and here is the Config file of Gatsby.
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
title: "gatsby-learning",
},
plugins: ["gatsby-plugin-sass"],
};
So this is the weird error I get when the App runs.
In Gatsby v3 you need to import the styles as ES modules, like this:
import * as styles from '../styles/home.module.scss'
Then, you'll be able to use your CSS modules at, for example:
<main className={styles.container}>
Keep in mind that this is not the recommended way of importing CSS modules because you are not allowing webpack to treeshake your styles. Ideally, you should import each named module like:
import { container } from '../styles/home.module.scss'
And applied as:
<main className={container}>
I am developing a React Component Library and I am struggling to apply some global styles (like resetting things) to the global level to be applied to all my components.
For instance, my app JS is something like this.
import './styles.module.css';
import Button from './Components/Button';
import Navbar from './Components/Navbar';
import Input from './Components/Input';
export {
Button,
Navbar,
Input,
}
and a generic global css file would be something like this:
:root {
padding: 0;
margin: 0;
}
I thought of using the approach from Styled Components as well, but as I don't have anything wrapping my components (it's a library), I don't know exactly where/how to use it.
Any hints ?
This wouldn't be the most elegant solution, but you could create a mixin (with default styles) and import it within each component.
In styled-component you could do it like this:
Define mixin in a file and export it
import { css } from 'styled-components';
export const defaultStyles = css`
margin: 0;
padding: 0;
// other default styles go here...
`
and then use it in each component like:
import styled from 'styled-component'
import {defaultStyle} from './path/to/file/from/where/you/export/defaultStyle'
const Button = styled.button`
${defaultStyles}
border: none;
// other commponent specific styles go here...
`
I am using prime-react to style my React page. But I want a more compact website with very few padding and minimum styling. For this purpose, I want to override a few CSS properties for the prime-react components.
For eg, I am trying to reduce the padding for the MenuBar -
HomePage.js
import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<div>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</div>
);
}
}
const ComponentView = styled(HomeMenuBar)`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`;
The above code makes no difference to the original styling.
I am trying to make use of this component.
However, particularly using these styled-components I don't like it. I am new to react and would like to know if there are better alternatives like, storing the CSS properties in another file and then importing it in the required file. I tried this part but it also didn't work out.
I work with react over a year and have seen lot of different ways to customise components and so far, I think that styled-components is the most convenient way to customize components if you cook them right.
I love to put all customized components with styled to a separate file near the index.js called styled.js of Component.js and Componnet.styled.js (in the separate folder of course MyComponent/index.js);
In styled.js you export all components like this:
export const Container = styled.div`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`
In index.js file you inport them like this:
import {Container} from './styled'
// or import * as Styled from './styled' (if you have a lot of customized components);
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<Container>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</Container>
);
}
}
If you want to try something more like classic css try to look at css-modules.
This article can help https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/
You can also try patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz example.
I have some issue using scss directly in material ui, because not all styles are applied. Tried to use makeStyle, but because I use class component, it gives warning about invalid hook call.
The style :
.table-header {
background-color: #005CAA; //only this style works
color: white;
font-weight: bold;
text-align: center;
}
I call in in TableCell component from Material UI
<TableCell className="table-header">Invoice Number</TableCell>
For the scss file, I import it in parent component App.tsx, or I need to import the file directly in the Table component? Thx
I follow the makeStyles approach as it's recommended way of overriding the material-ui styles, else you'd have to use !important in your css/scss files to override the material-ui styles.
https://mui.com/styles/basics/
// component file
import React from 'react';
import { TextLineStyles } from './styles';
export default function TextLine({ text }) {
const classes = TextLineStyles()
return <div className={classes.root}>
<div data-title="line" >
<div data-title="text">
{text}
</div>
</div>
</div>
}
// style.js
import { makeStyles } from "#material-ui/core/styles";
export const TextLineStyles = makeStyles(theme => ({
root: {
'& [data-title="line"]': {
borderTop: `1px solid lightgray`,
'& [data-title="text"]': {
color: 'red' // scss like nesting
}
}
}
}));
If you want to use CSS/SCSS class in MUI component, you should import the file directly in the Table component. But, it's not good to use SCSS with MUI component, you should use makeStyles or withStyles to style the MUI component.
I am not sure if it is the best practice, in fact thats why I ended up in this post.
Here it explain how to use scss with material-ui: https://www.markmakesstuff.com/posts/mui-css-modules
"Just install node-sass"
"if you're working with an app you initialized with a script like create-react-app, you are in luck. No webpack edits necessary. Just give your module a name that ends with ".module.scss""
OTHERWISE
2') You need to "make some minor edits to your webpack config"
"You can then import your module with a name then use that to refer to your classes when writing your fancy JSX"
I have the following .scss file
div.topMenuIndex {
ul {
&:before {
content: "☰";
padding: .15em .25em;
text-align: center;
background: #ea764b;
color: #f8d4c6;
}
&.LoginStatus{
background: azure;
}
}
Now I import this into my react component
import styles from "./TopMenuIndex.scss";
When defining the component how do I refer to div.topMenuIndex.LoginStatus in my div element
Hello jim
You can use className=""
So in your case, put <div className="topMenuIndex LoginStatus"></div>
The styles object will have all your classnames as key and corresponding hash as the value.
So your need to use styles[<classname>]
Example
<div className={`${styles[topMenuIndex]} ${styles[LoginStatus]}`} />
Hope this helps!
I highly recommend using react-css-modules if you can. You will just need to wrap your component with a decorator, but using your styles will be so much easier.
Here's how
npm i -S react-css-modules
In YourComponent.js
import CSSModules from 'react-css-modules'
import styles from "./TopMenuIndex.scss";
Then somewhere down in your component you will just use them as names, but using styleName instead of className
<div styleName="topMenuIndex LoginStatus">test</div>
and you export your component like this at the end
export default CSSModules(YourComponent, styles, { allowMultiple: true });