I want to change the border radius of all my input field of my project. For example for the TextField component I want instead of . According to the Mui v5 docs I should set my theme to
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: 16
},
}
}
}
})
If I do this in a sandbox, then this works.
https://codesandbox.io/s/globalthemeoverride-material-demo-forked-iebvrr?file=/demo.tsx:239-384
If I do this in my project, then this does not work.
For a TextField component the div that is impacted is
In the sandbox the style sheet associated to that div is
In my project the style sheet associated to that div is
The difference is that the classes MuiOutlinedInput-root and MuiInputBase-root don't appear in the sandbox whereas they do appear in the project. What setting causes these classes to not change the style sheet, and how should I change the theme to get the changed borderRadius in my project too?
You can try adding the shape inside your theme object like:
shape: {
borderRadius: 16,
}
For example, your theme should look like:
const theme = createTheme({
shape: {
borderRadius: 16,
},
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: 16
},
}
}
}
})
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
I have several custom utilities configured in my tailwind.config.cjs file this:
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: '1px solid #ef4444',
},
[...]
};
addUtilities(utilities);
}),
],
I also have defined custom colors, like this
extend: {
colors: {
'red-50': '#FEF2F2',
[...]
'red-500': '#EF4444',
[...]
}
}
Instead of having the hard-coded value in my custom utility, I'd like to reference my custom color, so that if I ever change my color palette my custom utilities would be updated accordingly. So, ideally, it would be something like this:
const utilities = {
'.border-invalid': {
apply: 'border border-solid border-red-500',
},
Or some way to reference red-500 in my custom utility instead of the hard-coded #EF4444.
Is there a way to achieve it?
#ihar-aliakseyenka answer workes great, I added this just to tell that the second alternative, border: "1px solid theme('colors.red-500')" even show a nice and clear css definition when flying with the mouse over:
While the first option, border: 1px solid ${theme('colors.red-500')}` just show the literarl value (as expected, btw):
You may use theme() directive
plugins: [
plugin(({ addUtilities, theme }) => { // extract theme
const utilities = {
'.border-invalid': {
border: `1px solid ${theme('colors.red-500')}`, // concatenate
}
};
addUtilities(utilities);
}),
],
// or pass it as a string
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: "1px solid theme('colors.red-500')",
}
};
addUtilities(utilities);
}),
],
Note: you set your color as red-500, so no dot notation will be available like theme('colors.red.500') (it will cause error. Well maybe not because Tailwind has red-500 color but in any other cases it will)
DEMO
Follow the vaadin guidence of web component to create a meter:
#Tag("dw-meter")
#NpmPackage(value = "echarts", version = "5.2.2")
#JsModule("../node_modules/echarts/dist/echarts.js")
#JsModule("./dwmeter.webcomponent.js")
public class DwMeter extends Div {
}
Integrate the meter into a demo application:
DwMeter meter = new DwMeter();
meter.setWidth("100px");
meter.setHeight("100px");
add(meter);
Application is executed successfully, but the meter is not displayed.
Trace the web page, Tag <dw-meter> and <canvas> are generated correctly :
Changed Tag <dw-meter> to <div>, the meter is visible:
My question is how to visualize an user-defined vaadin web component? e.g. <dw-meter>
attached dwmeter.webcomponent.js:
import * as ECharts from "echarts";
class dwMeter extends HTMLElement {
constructor() {
super();
}
init(o) {
// Shadow root
const shadowRoot = this.attachShadow({mode: 'open'});
// container
var container = document.createElement('div');
shadowRoot.appendChild(container);
// Garantee all elements are rendered
setTimeout(function() {
var myChart = ECharts.init(o); //container
myChart.setOption(o.options());
}, 0);
}
options() {
const gaugeData = [
{
value: 0.25,
name: 'pressure',
title: {
offsetCenter: ['0%', '90%']
}
}
];
var option = {
series: [
{
type: 'gauge',
min: 0,
max: 0.25,
splitNumber: 5,
progress: {
show: false,
width: 5
},
axisLine: {
lineStyle: {
width: 5,
color: [[1, 'rgba(36,177, 76)']]
}
},
axisTick: {
show: false
},
splitLine: {
length: -10,
lineStyle: {
width: 5,
color: 'rgba(36,177, 76)'
}
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 10
},
anchor: {
show: true,
showAbove: true,
size: 12,
itemStyle: {
borderWidth:0,
color: 'rgba(36,177, 76)',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 5,
length: '60%',
offsetCenter: [0, '8%'],
itemStyle: {
color: 'rgba(36,177, 76)'
}
},
title: {
color: 'rgba(36,177, 76)',
fontSize: 14,
fontWeight: 800,
fontFamily: 'Arial',
offsetCenter: [0, '100%']
},
detail: {
valueAnimation: true,
fontSize: 12,
offsetCenter: [0, '55%'],
show: true
},
data:gaugeData
}
]
};
return option;
}
connectedCallback() {
this.init(this);
}
disconnectedCallback() {
}
attributeChangedCallback() {
}
clone(origin, target) {
var target = target || {};
for(var prop in origin) {
target[prop] = origin[prop];
}
}
}
window.customElements.define('dw-meter', dwMeter);
The reason that nothing is shown when you're using the <dw-meter> custom element is that it has a shadow root, while the actual content (rendered by the ECharts library) is outside that shadow root. Whenever an element has a shadow root, then the content of the shadow root will be rendered and the content outside the shadow root will be rendered in the location of a <slot> element inside the shadow root. If there is no <slot>, then it won't be shown anywhere at all.
If you want to use the shadow root to encapsulate styles, then you would at the very least need to change ECharts.init(o) to instead do ECharts.init(container). There might also be other things that you need to change to make it work properly, but that depends on exactly how ECharts is implemented. The o parameter that I assume you're passing from the server is most likely redundant since this is already a reference to the top-level element.
I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right
you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.
I have implemented dropdown using react-select using which on typeahead options are shown, but initially the dropdown list is huge and its occupying whole page .
I want to know how to style the react-select dropdown list to fixed height and on overflow provide scroll.
react-select
Following is my partial code
class Project extends React.Component {
render() {
const selectStyles = {
input: base => ({
...base,
color: theme.palette.text.primary,
'& input': {
font: 'inherit',
},
})
};
return ( <
SelectN inputProps = {
{
name: 'headedByUserId',
id: 'headedByUserId',
}
}
classes = {
classes
}
styles = {
selectStyles
}
options = {
suggestions
}
components = {
components
}
value = {
this.state.fields["headedByUserId"]
}
onChange = {
this.handleChangeDropdown.bind(this, "headedByUserId")
}
placeholder = "select owner"
/
>
)
}
}
react-select has a attribute
maxMenuHeight="200"
using this we can set height of the dropdown list, also if dropdown inside a material dialog you can set dialog property "overflow":"visible" for dropdown to be displayed