I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.
My code is the following:
import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';
interface MyPrimaryButtonProps {
label?: string
}
const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {
const styles: IButtonStyles = {
root: [
{
fontSize: '16px',
background: '#525CA3 ',
border: '1px solid #525CA3',
borderRadius: '20px',
padding: '0px 30px',
height: '40px',
selectors: { // <---
':hover': { // <--- this part doesn't work.
backgroundColor: 'red' // <---
},
}
}
]
};
return (
<div>
<FluentPrimaryButton styles={styles} text={label} />
</div>
);
};
export default MyPrimaryButton;
I get a custom button, but still the hover color remains default blue, instead of switching to red.
You can change the styling of the button when hovered like this:
const btnStyles = {
rootHovered: {
backgroundColor: "red"
}
};
// ...
<FluentPrimaryButton text = {label} styles = {btnStyles} />;
Related
I cannot find a way to change the style the IconButton of the status: 'error' Toast component in native base v3, which under the hood is using an IconButton component.
Here is the link to the main Toast functions such as useToast and their props
The simplified code to render a toast looks like the following:
import { useToast } from 'native-base';
...
const Toast = useToast():
...
Toast.show({
title: 'title',
status: 'error',
style: { backgroundColor: 'blue.200' },
})
But how would I increase the padding of the close icon button for example? It would be nice to do something like
I understand I can use the render prop to render a custom component, but I would prefer to use the default styling from native base and my extended theme - instead of having to style and render a component that looks exactly the same as the current Toast. This poses an issue if there are default style changes from native base or the app's extended theme, as changes would have to be hardcoded and changed in this render fn as well. Which is not practical!
Toast.show({
style: {
_icon: {
padding: 10,
},
}
// or
iconButtonStyle: { padding: 10 },
})
I can extend the theme and set a default style for IconButton component like so, but this would change every single IconButton in the app - which is not practical.
const myTheme = extendTheme({
components: {
IconButton: {
baseStyle: {
rounded: 'full',
padding: 10,
},
},
...
Is it possible to change the base styles like so?
const myTheme = extendTheme({
components: {
Toast: {
baseStyle: {
_icon: {
padding: 10,
},
},
},
...
It would be great to know how to change the styling of either:
the icon button of one specific Toast component (like in toast.show() above)
or the default styling for the close icon button of all Toast's, but not other IconButtons
Thanks!
I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and "Body" as a header, however the subtitle that is supposed to be a header appears in grey color and the body which is supposed to be the sub label appears to be black. How do we change the default colors when doing something like this:
<Label className="ms-font-l">Hello World</Label>
You can change Label color through Theme or Styles prop:
Theme:
import { createTheme } from 'office-ui-fabric-react'
const labelTheme = createTheme({
palette: {
neutralPrimary: '#f00',
},
})
<Label theme={labelTheme} className="ms-font-l">Hello World</Label>
Styles:
const labelStyles = { root: { color: '#f00' } };
<Label styles={labelStyles} className="ms-font-l">Hello World</Label>
Codepen working example
Addition:
If you want to apply styles on ms-font-l use selectors prop:
const labelStyles = {
root: {
selectors: {
'.ms-font-l': { color: '#f00' },
},
},
};
<Label styles={labelStyles} className="ms-font-l">Hello World</Label>
Component styling Wiki
I am new to react-native and i am trying to add multi selection component to my app
my code is as follows:
<SectionedMultiSelect
items={this.state.days}
uniqueKey="id"
hideSearch={true}
subKey="day"
selectText="Select Days"
selectToggle={{ color: '#f79334' }}
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
selectedItems={this.state.selectedDaysHomeRepair}
showChips={false}
theme = {
{
Colors:{
selectToggleTextColor:'#053075',
text:'#053075'
}
}
}
/>
does anyone know how to apply color to "Select Days" text. thanks
You could use the renderSelectText prop and pass your own text component with your custom styles.
<SectionedMultiSelect
items={this.state.days}
uniqueKey="id"
hideSearch={true}
subKey="day"
renderSelectText={() => <Text style={{ color: 'red', fontSize: 24 }}>Select Days</Text>}
selectToggle={{ color: '#f79334' }}
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
selectedItems={this.state.selectedDaysHomeRepair}
showChips={false}
theme = {
{
Colors: {
selectToggleTextColor:'#053075',
text:'#053075'
}
}
}
/>
Have a look at how this can be used in the example here.
I have the TooltipHost component listed below. After callout is shown, if I move the mouse to gapspace, e.g. to the area between button and callout, callout stays visible.
I want the callout to be closed when mouse gets out of button, even if it is inside the gapspace.
import * as React from "react";
import {
TooltipHost,
DefaultButton,
DirectionalHint
} from "office-ui-fabric-react";
export const ButtonWithTooltip: React.FC<any> = () => {
return (
<>
<TooltipHost
content="tooltip content"
calloutProps={{
gapSpace: 60,
calloutMaxWidth: 150,
isBeakVisible: false,
directionalHint: DirectionalHint.bottomLeftEdge
}}
>
<DefaultButton styles={{ root: { width: "100%" } }} allowDisabledFocus>
Submit
</DefaultButton>
</TooltipHost>
</>
);
};
This appears to be expected behavior since the tooltip is getting closed once the mouse leaves tooltip container
To control TooltipHost component visibility the following methods could be utilized:
ITooltipHost.show - Shows the tooltip
ITooltipHost.dismiss - Dismisses the tooltip
The following example demonstrates how to hide a tooltip once mouse leaves a button
import {
DefaultButton,
DirectionalHint,
ITooltipHost,
TooltipHost
} from "office-ui-fabric-react";
import * as React from "react";
import { useRef } from "react";
const ButtonWithTooltip: React.FC<any> = () => {
const tooltipRef = useRef<ITooltipHost>(null);
function handleMouseLeave(e: any): void {
if (tooltipRef.current) {
tooltipRef.current.dismiss();
}
}
return (
<>
<TooltipHost
componentRef={tooltipRef}
content="tooltip content"
calloutProps={{
gapSpace: 90,
calloutMaxWidth: 150,
isBeakVisible: true,
directionalHint: DirectionalHint.bottomLeftEdge
}}
>
<DefaultButton
onMouseLeave={handleMouseLeave}
styles={{ root: { width: "100%" } }}
allowDisabledFocus={true}
>
Submit
</DefaultButton>
</TooltipHost>
</>
);
};
Demo
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.