I was trying to make border around an image and my custom css was not working because of Image component css, it was overriding over my custom css and also applied tailwind and bootstrap to fix it but I was unable to fix it. Now I am not getting any clue to fix it I read some github issues but they are not enough to fix it.
code:code link
Example of how to use :global(_selectors_here_) with !important:
import Image from "next/image";
import sli from "./sl.png";
export default function IndexPage() {
return (
<div>
<Image className="ava" src={sli} alt="hello" />
<style jsx>{`
:global(.ava) {
border: 3px solid red !important;
}
`}</style>
</div>
);
}
To make className work in external component, you have to either use :global or the resolve tag.
And to override inline styles, with tailwindcss, you can use important modifier like !border.
Related
I am trying to style the MUI slider,so I decided to style it using the className prop. But the style applied to the main class does'nt get applied,while rest other styles like 'hover' state get applied. If I remove all the classes and just style it using SX prop,everything works fine. But I want to keep the styles seperate into an external css file.
Below is my code :
App.css
.container{
margin-left: 30%;
margin-top: 20%;
}
/* This does'nt get applied */
.slider {
color: #ff0000;
width: 300px;
}
.slider:hover {
color: #2e8b57;
}
.slider > .MuiSlider-thumb {
border-radius: 1px;
}
App.js
import "./App.css"
import * as React from 'react';
import Slider from '#mui/material/Slider';
export default function App() {
return (
<div className="container">
<Slider className="slider" defaultValue={30} />
</div>
);
}
The problem is with Material UI style injection order. The custom styles do apply, but Mui styles are injected before the custom style so they doesn't have effect in this case.
This guide explain how to change the injection order:
https://mui.com/guides/interoperability/#css-injection-order
I don't know if it is required, but I use css modules and material-ui. You can rename your css file to
App.module.css
then import like so
import styles from "./App.module.css"
you can then use it like
<Slider className={styles.slider} defaultValue={30} />
In Nextjs you can throw everything in styles.css to make it global, but I don't know if that is also for react as well.
I'm trying to style a component like this:
function _MenuItem({label, icon}){
return <div>
{icon}
<p>{label}</p>
</div>
}
export const MenuItem = styled(props => <_MenuItem {...props} />)`
color: red;
p{color: red}
*{color: red}
`
The component is rendering, but the styles are not being applied.
I have managed to apply the styles by making a styled div and creating the component from that div, but I was wondering if there is a way to apply the styles directly to the component?
I am very new with react and more with styled-components so I assume that I have misunderstood some basic concepts.
Making a styled div is the correct way of doing things. I couldn't find anything on styling a component directly nor felt the urge to done it before.
Even when the styled-component docs describe how to style any component, they are basically styling an element just with a different syntax.
There doesn't seem to be a good enough reason to do what you want to do, since you can achieve what you want to achieve by using the styled components as intended.
The following way of doing things works and it is super simple:
import styled from "styled-components"
const _MenuItem = ({label, icon}) => {
return <Root>
{icon}
<p>{label}</p>
</Root>
}
const Root = styled.div`
color: red;
p{color: red}
*{color: red}
`
export default _MenuItem;
Please let me know if I'm missing some specific use-case or something other.
I thought of creating a website with Nuxt.js. I heard that its pretty cool and easy to use. I am having a little knowledge on vue.js but still cant find the solution to this problem:
How will I remove the padding of the body?
I know the default margin/padding is 8px.
I tried following:
Created app.html/idex.html at root and set the style.
Added style in pages/index.vue
Used both margin / padding with !important tag.
But still, cant find solution
You can use the head() function in your layout or your page.
<script>
export default {
head () {
return {
bodyAttrs: {
class: 'reset-body'
}
}
}
}
</script>
<style>
.reset-body {
margin: 0
}
</style>
Stackblitz: https://stackblitz.com/edit/nuxt-starter-pl9ywp?file=pages%2Findex.vue
Or, if you want to really set it globally via the app.html file it should also work (added to the Stackblitz)
So I'm using Ant Design UI library with my create react app which is making it difficult for me to edit the style of more complicated Ant Design components. Like the progress bar is by default blue:
I want to make it another color and when I look at HTML in the Chrome console I see:
The className for that element is ant-progress-bg. Is there any way I can write some code in my React component and update the style to be from style={width: "12.5%, height: 8} into style={color: 'red', width: "12.5%, height: 8}?
This is all the React code I need to write to generate the Progress bar using the ant design library:
import { Progress } from 'antd';
<Progress
percent={percentVotes}
showInfo={false}
status="active"
/>
I've also tried importing CSS and added an "ant-progress-bg" CSS class with the styling I want but it didn't do anything.
In my Matches.css file I have:
.ant-progress-bg {
color: red;
}
which I import into my Matches.js file with import './Matches.css';
Here is a demo https://codesandbox.io/s/k0m0nl1my3
If you want to change progress bar color for all places then override this class
.ant-progress-bg {
background-color: red !important;
}
And if you want to change color only for this specific progress bar, add some extra class like
.my-progress-bar .ant-progress-bg {
background-color: red !important;
}
If you are using less for your custom styles, it's even simpler
.my-progress-bar {
.ant-progress-bg {
background-color: red !important;
}
}
<Progress
percent={percentVotes}
showInfo={false}
status="active"
className="my-progress-bar"
/>
So I have a very large stylesheet and I'm attempting to use it in my React code. I know typically you would use this format for styling in React:
transparentBg: {
background: 'transparent'
},
WhiteText: {
color:'white'
},
However, my css stylesheet looks like this:
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Is there anyway to convert my entire CSS stylesheet into that React-style format? Or a way for me to just use the original CSS stylesheet without converting it?
Your CSS is still just CSS and React still just renders HTML elements on the page.
This means that you can add your large CSS file into html file and just add CSS classes / ids etc. that you define there to the elements in React.
So if you have
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Then in your React components you can use these classes:
var SomeComponent = function () {
return <div className="WhiteText">
Foo Bar Baz
</div>;
};