I am using grommet library for my web app. I want to know how can I avoid showing borders below FormFields and other controls such as Accordions.
I have created a sandbox that demonstrates the problem and allows for testing any recommendations.
https://codesandbox.io/s/grommet-accordion-issue-v7u5y?file=/index.js
I have set the Accordion theme value to hide the border but I still see and I see no such setting on a FormField.
Since both Accordion and FormField are considered interactive elements that should be accessible via keyboard, the bottom border is needed for accessibility indication when focusing on the element (focus indication is the green border you see as you use the Tab keyboard through navigating between the user interface or when the element has focus).
That being said, you can always set the color of the border to 'transparent' so it won't be visible, this will maintain the accessibility standards of the components yet the border itself wouldn't be visual on the UI.
I tried the following theme on your code snippet and it seems to do the trick as expected:
const theme = deepMerge(grommet, {
accordion: {
panel: {
border: {
color: "transparent"
}
},
border: {
color: "transparent"
}
},
formField: {
border: {
color: "transparent"
}
}
});
Related
Here is codesandbox. I am trying to have the ability to sort by the first name and last name The default Datagrid only shows the sort icon when hovering. Is there a way I can set it to be always visible? Thanks for the help!
you can use .MuiDataGrid-iconButtonContainer. however Material-UI doesn't provided default icon for unsorted list. I have forked your demo and updated it. added icon for unsorted list too. please check codesandbox
This is what I did:
const StyledDataGrid = styled(DataGrid)(() => ({
'& .MuiDataGrid-iconButtonContainer': {
marginLeft: '2px',
visibility: 'visible !important',
width: 'auto !important',
},
}))
I created a styled component which adds some custom styling to DataGrid. Specifically to always show the icon and take up width for it. Using !important is not recommended, but doesn't harm in this case.
I must add, this only works with using custom sort icons, like so:
<StyledDataGrid
components={{
ColumnSortedAscendingIcon,
ColumnSortedDescendingIcon,
ColumnUnsortedIcon,
}}
/>
If you don't want to use custom icons, I'm sure it's doable, you just need to play with CSS bit more.
Add the below code in .scss file. (.MuiDataGrid-sortIcon is pre-defined class of Mui Datagrid). Hope it helps!
.MuiDataGrid-sortIcon {
opacity: inherit !important;
}
You can use the sx prop in DataGrid like so:
<DataGrid
sx={{
'.MuiDataGrid-iconButtonContainer': {
visibility: 'visible',
},
'.MuiDataGrid-sortIcon': {
opacity: 'inherit !important',
},
}}
In my case, I had to style both the iconButtonContainer and sortIcon make sure it's always visible.
I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option.
Here is the code so far:
....
<PhoneInput
country={'pt'}
localization={pt}
specialLabel={field.label}
value={phoneValue}
onChange={phone => setPhoneValue(phone)}
inputStyle={{
'&:focus': {
borderColor: 'red'
}
}}
/>
Sample:
Thanks!
You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following
borderClass: {
"&.react-tel-input .form-control:focus": {
borderColor: "#69e781",
boxShadow: "0px 0px 0px 1px #69e781",
}
}
then use this class as follows
<PhoneInput
containerClass={classes.borderClass}
.
.
/>
or if you use a CSS file you can override the rule below in your CSS file
.react-tel-input .form-control:focus:
The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.
Below example is for the devs using Material UI styled components.
".PhoneInputInput": {
"&:focus-visible": {
outline: "none",
},
}
I have been using React to create my own professional website. With this, I wanted a cool background in which I decided to use https://www.npmjs.com/package/react-particles-js
The only issue I have is that on mobile the particles do not fill the screen but instead seem to be stuck at the top of the screen. The easiest way to see this is to go to https://my-app-bwp36ovux.vercel.app/ and look at the site on your monitor then use the F12 debug console to change it to a mobile device. When doing so take note of the floating particles in the background.
I got this const I use to set values for the particles
const particalOpt = {
particles:{
number:{
value: 150,
density: {
enable: true,
value_area: 800
}
},
line_linked:{
distance: 100,
opacity: .2,
width: 2,
},
move:{
speed: 1,
bounce: true,
}
}
}
I call it by simply using
<div className="background">
<Particles
params = {particalOpt}
/>
</div>
I can not seem to put my finger on why using the background attribute these particles do not fill mobile devices.
For the full code go to https://github.com/13Smat/MySite
Thank you in advance.
Issue
The background div has 100vw and 100vh, but the canvas has its own width and height with an override to 100% each. The problem is that the div rendering the canvas has no absolute dimensions for the canvas to inherit from or be relative to.
DOM
<div class="background">
<div id="tsparticles"> // <-- no height/width for canvas to be % of
<canvas
class="tsparticles-canvas-el"
width="558"
height="281"
style="width: 100%; height: 100%;" // <-- applied style
></canvas>
</div>
</div>
The canvas element's applied style:
element.style {
width: 100%;
height: 100%;
}
Solution
Provide a width and height to the #tsparticles div. Add the following CSS to your App.css file.
#tsparticles {
width: 100%;
height: 100%;
}
please take a look at #Drew Reese's comment and edit your question.
In the meantime I can provide a helpful example
The attributes that will help you most here are background-size, background-position. You can also look at other background properties that might help.
Side note: React does not particularly change how styling works, I would recommend playing around with CSS - it's the best way to learn
If you want particles to be set like a full screen background I would recommend the backgroundMode option, you can read more here
You can set that options like this:
{
backgroundMode: {
enable: true,
zIndex: 0
}
}
If you set the zIndex property to a negative value remember to change the detectsOn property to ”window” if you need mouse interactions
I am using Material UI - Radio button
I want to override their focusVisible property where you can apply styles to checkbox on focus via keyboard only
I can target the input and use native focus-visible state and apply styles but it is not well supported in older browsers.
Material UI implemented their own focusVisible state but cannot figure out how to override that. Any suggestions?
Try this:
root: {
color: 'blue',
"&.Mui-focusVisible": {
color: "orange"
},
},
Add root class,
<Radio className={classes.root}/>
Is there a way to change the entire background color of the bottom tab when switching tabs in React Navigation 5?
Like this (tiktok app for example):
Background black on first tab
Background white on first tab
You can set the style in tabBarOptions
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
inactiveTintColor: '#fff',
style: {
backgroundColor: '#000',
}
}}
>
{/* screens */}
</Tab.Navigator>
Use the currently active route information from the props to switch that color as needed.
Runnable example: https://snack.expo.io/#notbrent/createbottomtabnavigator---background-color
edit: it looks like I am actually mistaken about this and there isn't an obvious way to edit the tab bar background color based off of the active tab with standard bottom tab navigator. You can use createMaterialBottomTabNavigator to get this behavior easily, otherwise you will likely need to do some other wokaround, eg: implement a custom tab bar or extend the default tab bar.