Is there a way to change the background property of my material-ui AppBar component to transparent without having to actually change the CSS?
I've tried the opacity property, but that reduces the opacity of everything within the component it seems.
Below is an example of what I mean on Stripe's website.
You can change its background color to transparent and remove the box-shadow this way:
<AppBar position="static" style={{ background: 'transparent', boxShadow: 'none'}}>
<AppBar color="transparent" elevation={0}>
The inline styles do the trick, so thanks for that. But I felt a little uncomfortable with the approach since we wouldn't normally use inline styles--with or without React.
I delved a little deeper to try to find something that fits more with the framework, and this is what I came up with.
// in App.js
const GlobalCss = withStyles({
'#global': {
'.MuiAppBar-root': {
background: 'transparent',
boxShadow: 'none'
}
}
})(() => null)
The tag then needs to be inserted into the markup, which for me is:
<div>
<GlobalCss />
<Router>
.
.
.
The relevant parts of the documentation are:
CSS rules to override, at AppBar API > CSS;
setting global CSS, at Global CSS override.
Related
I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?
<MapContainer
className='h-[700px] w-[700px] float-right mr-10 mt-10'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.
.tile-layer-class {
background-repeat: no-repeat;
background-size: cover;
}
UPDATE:
The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.
.leaflet-container {
overflow: unset <= or by using !important as well if that didn't reflect.
}
The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.
I think you will need to find out the reason for why there're 4 images rendered in the dom.
I tried to be honest to do my best. but I'm not familiar with Next.js
Is there a built-in way to set background color on <ion-content> in Ionic 3?
In Ionic 1, we could set the color scheme for <ion-content> using classes like content-stable. In newer versions of Ionic, you can set the color of certain components with input variables, for example <ion-navbar color="dark"> or <ion-item color="dark">.
I've tried this kind of input on ion-content but without any success. I could set background-color manually, for example style="background-color:#ddd;", but if there is a 'proper' way to do this in Ionic I would rather do that instead. What is the 'official' way to do this?
There is no official way of doing this. Ionic does not provide any attribute or API to change the background color of ion-content directly.
You will have to go through setting up the css yourself.
Just eg:
In your scss file :
.bg-style {
background: red;
}
and apply style to content as in your component Html file :
<ion-content class="bg-style">
In your app.scss add:
.content {
background: #f9f9f9;
}
In .scss file, you can try with:
ion-content { background-color: map-get($colors, dark) !important; }
I am using Material-Ui Appbar however when I scroll down the page the appbar goes underneath the address bar on iOS 10. And the address bar also stays open rather than collapsing. I am using the default material UI theme.
I dont assume it is supposed to work this way. Is there an example of how to do this correctly?
Ideally it would be great if the AppBar was fixed to the top of the page.
Thanks.
It's actually working as designed. If you want it to be fixed to the top of the page, you need to set CSS position to "fixed". This sticks the AppBar at the top, as desired, but since it is floating there it can obscure its own height's worth of content beneath it. So, you should compensate for that with some padding or margin (56px by default). Example using padding on outer container:
<div style={{ paddingTop: 56 }}>
<AppBar style={{ position: 'fixed', top: 0 }} />
<p>
Lots of tall/long content here...
</p>
</div>
Working jsFiddle: https://jsfiddle.net/qe141fd2/1/
I've been using react-bootstrap with bootstrap-material so far. However, I much prefer the API, as well as the overall simplicity of working with just material-ui. However, I'm currently developing an app that relies heavily in forms, and I would like to know if there is a way of making horizontal type forms, like in bootstrap-material.
Thanks in advance.
You may use flex positionning:
const flexContainer = {
display: 'flex',
flexDirection: 'row',
};
return (
<form style={flexContainer}>
// TextFields here
</form>
);
When I check the content area within tinymce using firebug, I notice that TinyMce is adding a class=mceItemTable to each of my tables. This is annoying because in the theme stylesheet it has definition for this which sets all tables to have a dotted bored and looks horrible.
Is there any way to turn this off?
Cool jsfiddle for tinymce
PS: Is there a correct name for a css definition/group like this?
.className {
background: blue;
color: red;
font-size: 12px;
}
You may set whatever class you like using this configuration setting: http://www.tinymce.com/wiki.php/Configuration:visual_table_class