question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom style with V 2.0.0-alpha.4 doesn't work

See original GitHub issue

What problem does this feature solve?

I tried custom badge style like #1629,but it doesn’t work.

Here’s my test code.

custom.js It says Import badge module has no default module.

import badgeStyle from 'antd-mobile/lib/badge/style/index'

export default {
    ...badgeStyle,
    primaryHighlight: {
        padding: 0,
        backgroundColor: '#fff',
        color: '#f19736',
        // borderStyle: 'solid',
        // borderWidth: 1,
        // borderColor: '#f19736',
    }

}

use space

import React, {Component} from 'react'
import {StyleSheet, View, Button,Text} from 'react-native'
import {List, Flex, Badge} from 'antd-mobile'
import {connect} from 'dva'

import {NavigationActions} from '../utils'
import {customBadge} from '../styles/customBadge'

const Item = List.Item

@connect()
class Account extends Component {

    gotoLogin = () => {
        this.props.dispatch(NavigationActions.navigate({routeName: 'Login'}))
    }

    render() {
        return (

            <View style={styles.container}>
                <List>
                    <Item style={{alignItems: 'center'}} arrow="empty">
                        <Flex justify="center">
                            <Flex>
                                <Badge style={customBadge} text={'陈jie'}/>
                            </Flex>
                        </Flex>
                    </Item>
                </List>
                <Button title="Goto Login" onPress={this.gotoLogin}/>
            </View>
        )
    }
}

package “antd-mobile”: “^2.0.0-alpha.4”, “dva”: “^1.3.0-beta.4”, “expo”: “^19.0.1”, “react”: “16.0.0-alpha.12”,

What does the proposed API look like?

ref #1629

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:19 (8 by maintainers)

github_iconTop GitHub Comments

6reactions
silentcloudcommented, Aug 3, 2017

@AlberZ1989

import customBadge from '../styles/customBadge'
1reaction
silentcloudcommented, Aug 10, 2017

@paranoidjk 嗯,一时忽略了

@cielu 额,InputItem 哪里有 primaryHighlight 的样式?

只有 container , text , input, extra, errorIcon

https://github.com/ant-design/ant-design-mobile/blob/master/components/input-item/style/index.native.tsx

primaryHighlight 这个只是我举例的 button 里的,你不能直接照抄例子吧

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3 - Vite app missing some CSS rules after build
The reason behind lost CSS is purgecss library. When building for production, it removes CSS rules that are not being used.
Read more >
Release notes | U.S. Web Design System
Here you'll find our release notes — summaries of bug fixes, new features, and other updates introduced in each release. Have suggestions for...
Read more >
Migrating to v4 - Bootstrap
This allows us to style the label based on the input's state, simplifying support for the disabled attribute (previously requiring a parent class)...
Read more >
<color> - CSS: Cascading Style Sheets - MDN Web Docs
The CSS data type represents a color. A may also include an alpha-channel transparency value, indicating how the color should composite with ...
Read more >
Upgrading Guide - Keycloak
Preparing for upgrading; Upgrading the Keycloak server ... If you have customized any of the styles and are extending the Keycloak themes ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found