This question already has answers here:
CSS pseudo elements in React
(8 answers)
Closed 5 years ago.
I need to apply some CSS rules to ::before and ::after, but I can't figure out how.
I tried passing inline styles to my component like this (using JSX):
const color: '#fff';
const style = {
'::before': { backgroundColor: color },
'::after': { backgroundColor: color },
};
<div style={ style }>
I tried other permutations as well, such as ':before', '&::before', before... nothing seems to work.
Is this even supported by React? If so, what's the right way of doing it using inline styles?
react's inline styles don't support css pseudo-classes. Or media queries. You could either write plain css, or use a lib for that https://github.com/styled-components/styled-components
You can style-loader to your webpack config.
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
This adds CSS to the DOM by injecting a style tag, when you import any css in your component.
import style from './file.css'
Related
I was trying to use a npm package which has a Typography element from Material UI. This is written by me.
When I try to use it in a project, the typography css class properties override the custom css properties. An example is margin which is present in both the CSS classes but in some scenarios I see the margin of "MuiTypography-h1" overriding the custom css. How do I prevent this?
My general idea is custom CSS properties should always take precedence over MUI default CSS class properties. How can I make this happen ?
<Typography
variant="h1"
sx={{
width: '235px',
height: '96px',
fontSize: '20px',
fontWeight: 500,
lineHeight: '1.2',
color: 'primary',
textOverflow: 'ellipses',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 4,
WebkitBoxOrient: 'vertical',
marginTop: '11px',
}}
>
Title
</Typography>
Straight forward way to do: 🚀
you can directly override the MUI component with your custom CSS properties using the class name in your 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 "css-element-class-name" class on your "CSS" file as follows
.css-elemet-class-name{
color: yellow;
height: 25px;
padding: 15px;
}
I've found that, MUI theme should be created in order to override MUI--root properties with your css styles, so try somethins like this:
add your custome styles inside overrides:{}
const theme = createTheme({
overrides: {
MuiTypography: {
h1: {
'&.MuiTypography-gutterBottom': {
marginBottom: 7,
},
},
h2: {
marginBottom: props => (props.gutterBottom ? 20 : null),
},
},
},
});
and for the imports
import createtheme from '#material-ui/core/styles'
if you are using this version:
"#material-ui/styles": "^4.11.2",
I'm building a blog in NextJS. Apparently in Tailwind's list style type the default style is list-none. So every <ul> <li> elements in my app is not styled at all.
I use remark to process .md files and my function returns <ul> <li> without classes so in this case I can't specify the classes by manually writing them.
Is there any way to change this default styling so my <ul> <li> is not plain text?
or is there any way to give a list-disc class to all <ul> <li>?
or is there any way to exclude certain <div>s from being styled by Tailwind?
other approach?
I tried this
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
listStyleType: false,
}
}
but it doesn't solve the problem.
Any help would be appreciated.
Directives
You can use a preprocessor like PostCSS you can use the #apply or use the #layer directive.
ul {
#apply list-disc;
}
OR
#tailwind base;
#layer base{
ul {
#apply list-disc;
}
}
Base styles
You can also use base styles
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, theme }) {
addBase({
'ul': { listStyle: 'disc' },
})
})
]
}
You can disable the tailwind default nomalized stylings (preflight) from the tailwind.config.js like this:
module.exports = {
corePlugins: {
preflight: false,
}
};
Checkout the tailwind plugin #tailwindcss/typography: https://tailwindcss.com/docs/typography-plugin
Use prose class to wrap your markdown content, so that tailwind default style would be removed.
There are several html files and one css file that is used from all the html. I used the library flutter_html and the html files are being displayed normally but without css.
Is there a way to "import" the css file as it is without converting it to Dart?
Below is part of the css file. It's very simple. If it cannot be imported what is the best way to translate it to Dart code?
body {... margin-right:20; margin-bottom: 3 ...}
table {... margin-bottom: 3}
h1 {...}
h2 {font-family: 'palatino linotype'...}
h3 {...}
p:first-letter {...}
body {...}
try to use this library it can identify css as well
and then you can use your css as inline style
String htmlContent =
"""
<p>This has no font size css property, but global style will be applied</p>
<a style='color: orange;'>The inline color for this is orange, but it will
get overridden by global style defined below</a>
""";
HTML.toTextSpan(
context,
htmlContent,
overrideStyle: {
"p": TextStyle(fontSize: 17.3),
"a": TextStyle(color: Colors.red),
// specify any tag not just the supported ones,
// and apply TextStyles to them and/override them
},
);
To select all the links that have not yet been visited we can use a:link. Suppose we used a class based implementation to style links like this:
.Link {
...
}
And we then apply this to anchor elements to style them like this:
<a class="Link">..</a>
Would it make sense to also implement .Link:link {}, while also implementing .Link:visited {}, .Link:hover {}, .Link:active {}. In seems that in this context .Link:link {} and just plain .Link {} do the same thing?
This question already has answers here:
Angular 2 - innerHTML styling
(11 answers)
Closed 5 years ago.
I'm trying to render a HTML in Angular 2 with [innerHTML]. However angular 2 removes the style attribute from html elements. How can I get the styles rendered?
component.ts
...
content = "<table><tr><td style="width:30%">Hallo</td><td style="width:70%">Welt</td></tr></table>"
---
component.html
<div [innerHTML]="content"></div>
You can address them with /deep/ ::ng-deep
#Component({
styles: [`
// :host /deep/ td { // old
:host ::ng-deep td {
width: 30%;
}`
})
You also could disable style encapsulation for the component
#Component({
...,
viewEncapsulation: ViewEncapsulation.None
)}
but that might bring other disadvantages as styles bleeding in and even styles without /deep/ bleeding out.