I am not able to load style sheet in my react app:
.App {
text-align: center;
}
.App p {
color: blue;
}
I am trying to print file on console then this is empty.
If you are starting the project from scratch using React, you will probably need to learn how to use the bundling tools such as
Webpack
Rollup
Parcel
They will give you the ability to use tools like css-loader which will allow you to import your css file into your react component in the header in this way:
import 'app.css'
Alternatively, you can just use react 'style' attribute directly on the component:
const style = {
app: {
textAlign: 'center'
},
p: {
color: 'blue'
}
};
And you can apply the style in this way:
<App style={style.app}>
<p style={style.p}>Hello world!</p>
</App>
For more information of using style, you can check the React official docs here: https://reactjs.org/docs/dom-elements.html#style
Related
I am trying to add styling inside a #mui/material/drawer component using tailwind.
import { Close } from "#mui/icons-material";
import { Box, Drawer, IconButton, TextField } from "#mui/material";
import { useContext} from "react";
import { SearchContext } from "store/context";
export default function SearchDrawer() {
const { search, setSearchMode } = useContext(SearchContext);
return (
<Drawer open={search.searchMode} anchor="bottom">
<Box sx={{ height: "100vh" }} className="bg-red-500">
<IconButton onClick={() => { setSearchMode(!search.searchMode); }}><Close/></IconButton>
<div>
<TextField variant="outlined" sx={{display: 'block'}}/>
<TextField variant="outlined" sx={{display: 'block'}}/>
</div>
</Box>
</Drawer>
);
}
Expected behavior is
<Box sx={{ height: "100vh" }} className="bg-red-500">
This line of code will make whole screen red, But Nothing happen.
Output after render
Tailwind styles are not applying on some of Material-ui components like "Drawer", "Dialog", "ToolTip" This all components are hover over other components.
Tailwindcss classes are not working in Tooltip & Dialog components #33424 - GitHub
This page says to modify material-ui theme,
defaultProps: {
container: rootElement,
},
},
But rootElement is available in Reactjs, How to do it on Nextjs.
this is what worked for me from the official docs :
Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead (CssBaseline).
In your file tailwind.config.js add the following :
//Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead
corePlugins: {
preflight: false,
},
Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA:
In your file tailwind.config.js add the following (for nextjs add #__next):
//Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA
important: '#__next',
Your file tailwind.config.js should like like :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
//Add the important option, using the id of your app wrapper. For example, #__next for Next.js and "#root" for CRA
important: '#__next',
theme: {
extend: {},
},
plugins: [],
//Remove Tailwind CSS's preflight style so it can use the MUI's preflight instead
corePlugins: {
preflight: false,
},
}
Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML , which gives MUI precedence over Tailwind CSS. To reduce the need for the important property, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:
import * as React from 'react';
import { StyledEngineProvider } from '#mui/material/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>
);
}
You can check the official documentation : https://mui.com/material-ui/guides/interoperability/#tailwind-css
I have built an app with vuetify and vue cli, there is nothing wrong when I am in dev. But after I run npm run build, there seems to be a new default #app CSS generated and overwrite my CSS in the final bundled file. In my case, all the text alignment and margin on my website went crazy. The dev mode works fine but it appears only in the prod.
CSS in the console
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from './store'
export default {
store,
name: 'App',
metaInfo: {
title: '',
titleTemplate:
},
created: function () {
}
}
</script>
<style >
#app {
text-align: unset;
margin-top: 0px;
}
</style>
Solved. I did not use scoped style in one of the deprecated components and it affects the whole app. What's strange is it didn't show up in development
I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this:
import React from "react";
import styles from "./styles.css";
export default class Register extends React.Component {
render() {
return (
<div className={styles.container}>
<h1> this text should appear to the right </h1>
</div>
);
}
}
And in my styles.css file I have this:
.container {
width:40%;
text-align:right;
}
For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.
If it matters, this is how my "config/webpack/development.js" file looks like:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:
import "./styles.css";
... className="container" ...
Or you can load local styles using following CSS-file syntax:
:local .container {...
Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).
seems like you didn't enable an option { modules: true } for css-loader in webpack config
take a look
webpack-contrib/sass-loader#206
https://github.com/webpack-contrib/css-loader#options
Taken from: https://github.com/facebook/create-react-app/issues/1350
I want to implement an option to switch between two themes in my React and Redux web app.
I have 2 different CSS files, one for each theme. Right now in order to apply a CSS file's stylings, I simply import it at the head of my App.js.
import '../styles/theme1.css';
const App = (props) => {
return (
<div>
<Header />
<Container/>
</div>
);
};
const mapStateToProps = (state) => ({
theme: state.settings.theme // can return 'theme1' / 'theme2'
});
export default withRouter(connect(mapStateToProps)(App));
So I want to import stylings according to the app's state ('theme1' or 'theme2').
I could think of some messy ways and found some ready-made packages for that, but I want to know if there is a conventional way to do so, efficiently and as clean as possible.
this is a create-react-app kit.
Thank you.
One possibility depending on how your taskrunner configuration is set up would be to introduce React-Helmet, which would allow you to change the CSS reference in your <head> depending on the theme.
import React from "react";
import {Helmet} from "react-helmet";
function StyleSwitch (props) {
return (
<Helmet>
<link rel="stylesheet" href={props.stylesheet} />
</Helmet>
);
};
Try using scss/sass - I think it could simplify the whole process, because it allows you to nest classes/elements.
For example, lets assume you switch between two states, theme1 and theme2:
<div className={this.state.theme}>
<h2>Some text</h2>
</div>
And your .scss file should look like
.theme1{
background-color: black;
h2 {
color: white;
}
}
.theme2{
background-color: white;
h2{
color: black;
}
}
I'm using facebook's create-react app for my application:
In my Login.js container, I am importing CSS like so:
import React from 'react';
import '../../styles/users/Login.css'
const Login = () => {
....
The problem is the Login.css styles are being applied to my entire application... for example, if Login.css has:
body {
background:Red ;
}
The entire app would have a body of background: Red; Even outside of the Login container.
What I expected/want is for a CSS import within a container to only apply to that particular container.
Is that possible w React? How are react developers supposed to handle container specific stylings? Do I need to add an ID to all containers and include that in the entire CSS file?
1. Solution: Give your DOM elements class names to use them in your css.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a className="link" href={href}>{children}</a>
);
CSS:
// Link.css
.link {
color: red;
}
2. Solution: Inline styles.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a style={color: 'red'} href={href}>{children}</a>
);
3. Solution: CSS in JS.
There are some libraries that try to solve the styling issue:
Watch this talk: https://speakerdeck.com/vjeux/react-css-in-js
And have a look at this: https://github.com/cssinjs
styled-components: https://github.com/styled-components/styled-components
The best and easiest solution is to give classNames to every element you have in your code. I had the same issue when trying to apply widths and heights to my images and eventually found out that it was affecting whole app.