标签: styling

如何不在整个文本块上应用样式，而仅在第一次运行（粗体）上应用样式？

我想在 Bold Run 上应用样式“XXXFontName-Bold”，在其余部分应用样式“XXXFontName-Thin”。

        // add button
        Button btn = new Button();
        TextBlock contextText = new TextBlock();
        contextText.Inlines.Add(new Bold(new Run(label.Substring(0,1))));
        contextText.Inlines.Add(new Style());     <===== OBVIOUS ERROR HERE
        contextText.Inlines.Add(label.Substring(1));
        contextText.FontSize = 25;
        contextText.Style = FindResource("XXXFontName-Thin") as Style;
        btn.Content = contextText;

我希望将输入分成单独的字符/数字框，就像这张照片

理想情况下，输入数字会将您带到下一个输入框，并且每个数字都会用活动边框单独突出显示。我可以结合使用样式和 JavaScript 来完成此任务。

任何见解都会非常有帮助！提前致谢。

我正在开发一个小项目，想在单击按钮时更改按钮的颜色。我不知道该怎么做，非常感谢任何帮助。我正在 React 中工作并使用 Material-UI 库进行样式设置。

谢谢

我试图在选择菜单中显示学校取消的课程。按天安排：

但是，当开发人员工具中的移动分辨率时，我的菜单只会截断溢出文本。 热力学课被砍掉了。

我正在使用 Material ui 的选择菜单和 React。Material UI Select 文档我也在使用菜单项。我想让列出的类溢出到下一行。这是我每天展示课程的地方。

这是代码（这只是一个示例，它不会运行）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<FormControl className={classes.formControl}>
      <InputLabel id="demo-controlled-open-select-label" > Filter classes by day</InputLabel>
     
      <Select
        labelId="demo-controlled-open-select-label"
        id="demo-controlled-open-select"
        open={open}
        onClose={handleClose}
        onOpen={handleOpen}
          defaultValue={subjectFilter}
          onChange={handleChangeSubject}
        className="styleSelect"

        >
         {item.SUBJECT === 'OPEN_LEARNING' && 
               <ul className ="stylingList">
               {(state.subjects) && state.subjects.filter(item => 
               (item.SUBJECT === 'OPEN_LEARNING')).map(item => 
                 <li className ="stList">
                   {item.CLASS_FULL}
                 </li>
                 )}
                 </ul>
              }
            </MenuItem>
            //this is just one day.  I do this for all the days.
          ) )
        }
     
        </Select>
      </FormControl> …

活动选项卡上有一个默认的蓝色底部边框。但我无法改变这个边框颜色。有人可以告诉我如何更改此默认颜色吗？

const Tab = createMaterialTopTabNavigator();

const SpecificChannelNavigator = () => (
  <Tab.Navigator 
    tabBarOptions={{
      style: {
        // borderColor: colors['color-primary-500'],
        borderColor: "transparant"
      }
    }}
  >
    <Tab.Screen name={Routes.groupChat} component={GroupChat} />
    <Tab.Screen name={Routes.users} component={Users} />
    <Tab.Screen name={Routes.groupChatSettings} component={ChannelSettings} />
  </Tab.Navigator> 
);

export default SpecificChannelNavigator;

我编写了一个 CallToAction 组件，如下所示：

const CallToAction = ({ text = "Default text" }) => (
  <S_CallToAction>{text}</S_CallToAction>
)
const S_CallToAction = styled.div`
  // Some styles...
`
export default CallToAction

然后，当我想在另一个组件中使用它并使用更多样式重载它时，我会丢失我的“text”道具以及我在“CallToAction”组件中声明的先前样式。当我删除“as={'button'}”道具时，这效果很好。

当我想在另一个组件中使用它并重载它时，我做了以下操作：

import CallToAction from "components/common/callToAction"

...

        <S_ProductButton
          as={'button'}
          text={`I want my text to display and my style being inherited`}
        />

...

const S_ProductButton = styled(CallToAction)`
      width: 50%;
      margin: auto;
      min-width: 300px;
`

有人可以解释一下为什么添加“as”道具都会使我的样式超载并且我的文本道具不再起作用吗？ 另外，遇到这种情况你是怎么处理的呢？

注意：我是样式组件的新手...我可以导出“S_CallToAction”（仅限样式）并在我的其他组件中使用它，但这是一个好的解决方案吗？这将打破我的“一个组件=一种样式”的想法，这是样式组件背后的想法......

我做了很多搜索，但我尝试的任何方法都无法更改轴文本颜色。但是，我可以将网格颜色更改为白色scales.yAxes.grid.color。这就是我现在所拥有的：

  render(){
        return (
            <div className = "chart">
                <Line
                    data = {this.state.chartData}

                    options= {{
                        maintainAspectRatio: false,
                        scales: {
                            yAxes:{
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                            xAxes: {
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                        }
                    }}
                    width = {20}
                    height = {200}
                />
            </div>
        )
    }
}

这是我选中时的复选框：

这是我未选中时的复选框：

所有与复选框样式相关的帖子都涉及填充颜色、检查颜色等。我一定在这里遗漏了一些明显的东西 - 只是想让边框变暗！

我的代码：

<Grid item xs={12}>
  <FormControlLabel control={<Checkbox onChange={(event) => {
    console.log(event.target.checked)
    setValue('isParty', false)
  }} />} label="Party" />
</Grid>

我有一个非常扁平结构的树视图,只有两个级别的项目 - 主要项目和一个子项目级别.我正在使用WPF MVVM,并希望以不同的方式设置两个级别的样式,但不知道如何.

我将树视图绑定到我的ViewModel中的ObservableCollection,并且每个元素还有一个ObservableCollection用于下一个级别.

有帮助吗？

所以我希望我的提交按钮与我的其他输入字段的宽度不同.我试图这样做,但提交按钮仍然具有相同的宽度.请帮忙!这是我的CSS:

     #logon {
        position: absolute;
        margin-left: 60%;
        top: 10px;

    }
    #logon input { 
        display: inline;
     border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s …